Как создать геттеры и сеттеры для состояния модуля пространства имен vuex - PullRequest
Новая
       25

Как создать геттеры и сеттеры для состояния модуля пространства имен vuex

0 голосов
/ 20 мая 2018

Если у меня есть модуль Vuex с пространством имен, как создать методы получения и установки для состояний в этом модуле при использовании этих состояний в компонентах Vue? 

// 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' //, ...
    }
}

Я привязываю 'a' ктекстовый ввод в форму с использованием v-модели, а затем, когда я редактирую значение элемента управления, Vue выдает ошибку:

[Vue warn]: вычисленное свойство "a" было присвоено, но оно не имеетсеттер.

Как это решить?

Ответы [ 2 ]

0 голосов
/ 20 мая 2018

Я нашел другой способ, используя помощники Vuex mapStates и mapActions.Это немного более многословно.Таким образом, использование подхода привязки v-модели лучше.

// Кстати: если вы используете подход, предложенный ittus, тогда вы будете использовать привязку v-модели, как показано ниже: 

<input v-model="a" />

// Используя другой подход, который я использовал, вам придется выполнить двустороннюю привязку, как показано ниже: 

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

Если вы хотите использовать привязку v-модели, тогда код будет чем-токак показано ниже: 

// 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 ]),
  }
})
0 голосов
/ 20 мая 2018

Если вы хотите сделать привязку двумя способами, вам нужно определить и получатель, и установщик в вычисляемых свойствах.(Не забудьте определить мутацию updateA) 

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

Другой вариант использует mapFields

...