Vue.js – Computed property was assigned to but it has no setter

vue.jsvuex

What is the correct syntax/hooks to make this work for myVal?

My code looks like this:

<v-item-group v-model="myVal" ...

import { mapActions, mapGetters } from 'vuex'; 
export default {
  computed : {
     ...mapActions({
       myVal: 'myModulePath/setMyVal'
     }),
     ...mapGetters({
       myVal: 'myModulePath/getMyVal'
     }),
  },
}

The store looks like:

actions: {
  setMyVal({commit}, value){commit('someMutation',value);}
getters: {
  getMyVal: state => { return state.myVal;}

I'm not sure how to wire it so the 'setter' works and the error message goes away.

I've also tried this to no avail:

...mapState('myModulePath', ['myVal'])

Best Answer

You need to define a single computed with a get and a set function. Maybe:

export default {
  computed : {
     myVal: {
        get() { return this.$store.getters.getMyVal; },
        set(newValue) { this.$store.dispatch('setMyVal', newValue); }
     }
  },
}
Related Topic