vuex namesthed 모듈 상태에 대한 getter 및 setter를 생성하는 방법

vuex namesthed 모듈 상태에 대한 getter 및 setter를 생성하는 방법

네임슬레이징된 Vuex 모듈이 있는 경우 Vue 컴포넌트에서 이러한 상태를 사용할 때 해당 모듈의 상태에 대한 getter 및 setter를 작성하려면 어떻게 해야 합니까?

// My component
new Vue({

 computed: {

   // How do I add setters also below????

   ...mapState('nameSpacedModA', {
       a : state => state.a,
       // ...
   },


   // Following will only add getters..
   // How to add setter ??? 

   ...mapGetters('nameSpacedModA', {
         a: 'a', 
         b: 'b' //, ...
    }
}

v-model을 사용하여 양식의 텍스트 입력에 'a'를 바인딩하고 제어 값을 편집하면 Vue에서 다음 오류가 발생합니다.

[Vue warn] :계산된 속성 "a"가 할당되었지만 설정자가 없습니다.

어떻게 해결할까요?

양방향 바인딩을 수행하려면 계산된 속성에서 getter와 setter를 모두 정의해야 합니다.(변환 정의 잊지 마세요)updateA)

<input v-model="a">
// ...
computed: {
  a: {
    get () {
      return this.$store.state.a
    },
    set (value) {
      this.$store.commit('updateA', value)
    }
  }
}

다른 옵션은 mapFields를 사용하는 것입니다.

Vuex mapStates 및 mapActions 도우미를 사용하여 다른 방법을 찾았습니다.이것은 조금 더 장황하다.따라서 v-model 바인딩 방식을 사용하는 것이 더 좋습니다.

// BTW: 제안대로 접근 방식을 사용하는 경우ittusv-model 바인딩을 다음과 같이 사용합니다.

<input v-model="a" />

// 제가 사용한 다른 방법을 사용하면 다음과 같이 양방향 바인딩을 수행해야 합니다.

<input :value="a" @input="updateA" />

v-model 바인딩을 사용하려는 경우 코드는 다음과 같습니다.

// Vuex store 
....
modules: {ModuleA, ...}


// ModuleA of store
export default {
  namespaced: true,
  states: {
    a: '',
  },

  mutations: {
     updateA: (state, value) => state.a = value
  },

  actions: {
    updateA(context, value) { context.commit('updateA', value) }
  }
}

// Then in your Component you will bind this Vuex module state as below
new Vue({
  store,

  computed: {
     a: {
         get() { this.$store.state.ModuleA.a; }
         set(value) {this.updateA(value);}
      },

  },

  methods: {
    ...mapActions('MyModule', [ updateA ]),
  }
})

언급URL : https://stackoverflow.com/questions/50430001/how-to-create-getters-and-setters-for-vuex-namespaced-module-state