Computed property defined within ...mapState() has no setter

Question

In my Nuxt application I'm initialising computed properties with data retrieved from the store within the mapState helper, however I also need to modify the value of these computed properties upon certain user actions.

Well I can't do that as I get a "has no setter" error when using that code:

computed: {
    ...mapState({
      monRaw: state => state.currentWeek

I tried to define setters to no avail and the code doesn't make too much sense either:

computed: {
      ...mapState({
            get: function (state) {
              return state.currentWeek
            },
            set: function (state, data) {
              state.currentWeek = data
            }

Is it simply not possible to change computed properties' values when defined with mapState()?

Have a look at: https://stackoverflow.com/questions/44272405/mapstate-with-setter — mava, Jun 18 '19 at 11:57

score 1 · Accepted Answer · answered Jun 18 '19 at 12:33

mapState is a convenience function that provides a mapping of a computed property under the identical key in your vuex store. It provides read only access to those properties. Since you want to use updates you will have to forego mapstate and define your own computed getter/setter as follows:

computed: {
  currentWeek: {
    get() {
      return this.$store.state.currentWeek;
    },
    set(v) {
      this.$store.commit('updateCurrentWeek', v);
    } 
  }
...
}

obviously updateCurrentWeek will have to be defined in the mutations section of your vuex store.

Computed property defined within ...mapState() has no setter

1 Answers1