How to create getters and setters for vuex namespaced module state

Question

If I have a Vuex module which is namespaced, how to create the getters and setters for the states in that module when using these state in Vue components?

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

I am binding 'a' to a text input on a form using v-model and then when I edit the control value, Vue is giving error:

[Vue warn]: Computed property "a" was assigned to but it has no setter.

How to solve this?

Answer 1

If you want do do 2 ways binding, you need to defined both getter and setter in computed properties. (Don't forget to define mutation updateA)

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

Another option is using mapFields