Computed property was assigned to but it has no setter

8
votes

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'])
2
vue.jsvuex

2 Answers

15
votes

You need to tell the vue component what to do when the computed property is assigned a new value

computed: {
     myVal: {
        get: () => this.$state.store.getters.myModulePath.getMyVal,
        set: (value) => this.$state.commit('someMutation', value )
    }
  }

Note that I use the setter instead of the action. Using an action in the computed property setter is a bad idea because actions are usually asynchronous and can cause headaches trying to debug the computed property later.

18
votes

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); }
     }
  },
}