Vue에서 비부모관계에서 통신을 할 경우

  • 전역에 Vue로 생성자 객체 를 만든후 그것을 통해 통신하는 방법을 사용할 수 있고
  • Vue에서 제공하는 Vuex를 사용할 수도 있다.

Vue에서 제공하는 Vuex를 사용해보자.

Vuex 설치하기

1
npm i -D vuex

Vuex 세팅하기

1) main.js에 Vuex를 import시키기

1
import Vuex from 'vuex';

2) Vuex를 쓰겠다고 해주기

1
Vue.use(Vuex);

3) Vuex.Store로 store 객체 생성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const store = new Vuex.Store({
  state: {
    user: {
      name: 'Jihyun'
    }
  },
  getters: {
    getUserInfo(state) {
      return state.user;
    }
  },
  mutations: {
    setUserInfo(state, new_user_info) {
      state.user = new_user_info;
    }
  }
});
  • State : 상태값들을 설정
  • getters : 값을 가져오는 함수들을 설정
  • Mutations : 값을 바꿔주는 함수들을 설정

4) Vue를 생성하면서 store객체를 넣어준다.

1
2
3
4
5
6
new Vue({
  el: '#app',
  router,
  store,//사용되도록 설정
  render: h => h(App)
});

5) vue파일에 사용해보기

1
2
3
4
5
methods: {
           knownUserInfo() {
               this.$store.getters.getUserInfo;
               this.$store.commit('setUserInfo', {넘겨줄 값});
           },

store에 있는 getters에서 getUserInfo에서 값을 가져온다.

1
this.$store.getters.getUserInfo;

store에 있는 mutations에서 setUserInfo에 값을 넘겨 값을 변경

1
this.$store.commit('setUserInfo', {넘겨줄 값});

vuex 동작 원리

from vuex site

참고하기

1. Vuex document

2. Vuex github

3. Vue 한국 사용자 모임