6.Vuex (state,getters,Mutations,Actions)

1.Vuex 란 ?

• Vuex 는 vue.js 애플리케이션 에대한 상태관리 + 라이브러리 
• Vuex를 사용하면서 해당 어플리케이션의 모든 컴포넌트에 대한 중앙 집중식 역할을한다.

단방향의; 데이터 흐름 (Vuex 공식문서 사진 참조입니다)

데이터 흐름은 모두 한방향(SPA) 로 흐른다.

 

강의를 들으며  공부를 해보았던 예제 입니다.

export default{
  namespaced:true,
  //Data 매칭 하는 개념이다.
  state: () => ({
    a:123,
    b:[]
  }),
  // computed  같은개념 

  getters:{
    someGetter1(state,getters){
      return state.a + 1
    },
     // 여기에서 보여준 다른 Getters 선언 
    someGetter2(state,getters){
      return state.a + getters.someGetter1
    }
  },
  // payload 
  mutations:{
    someMutation(state,payload){
      state.a= 789
      state.b.push(payload)
    }
  },
  //context 는 state,getters,commit,dispatch  총 4가지를 사용할수가있다 
  actions:{
    someAction1({ state,getters,commit,dispatch },payload){
      state.a=789 //Error
      // state.b.push(payload) Error
      commit('someMutation',payload)
    },
      someAction2(context,payload){
        context.commit('someMutation')
        context.dispatch('someAction1',payload)
    }
  }
}

 

1.Vuex 를 공부하면서 조금씩 조금씩 더욱더 추가할예정입니다 . !!

2.살을 붙이면서 내용정리를 한번더 훓겠습니다