Mutating Vuex array that is used in different component

Question

In first component I have a function that changes the array using the value that is stored in VueX

 methods: {
    //get a function that changes the pickedlist array that is stored in vuex store
    ...mapActions([ 
      'updatePickedDates'
      ]),
    ...mapGetters([
      'dates'
    ]),
    resetArray() {
      this.updatePickedDates(this.dates}
 }

In another component

I use getter from VueX that is passed on this array:

 computed: {
    ...mapGetters(["managementNews"])
  }

However when resetArray() function runs I get error that state.pickedDates.includes is not a function

Here are the getters and mutations in my VueX store:

 mutations: {
    mutatePickedDates: (state, payload) => {
      state.pickedDates=payload
    }
  },
  actions: {
    updatePickedDates({commit}, payload) {
      commit('mutatePickedDates', payload)
    }
  },
  modules: {
  },
  getters : {
    //get news that are of type management
    managementNews: function(state) {
      return state.news.filter(i => i.type === "management" && state.pickedDates.includes(i.date));
    },
    dates: state => {
      return state.dates
    },
    pickedDates: state => {
      return state.pickedDates
    }
  },

Estus Flask Estus Flask · Accepted Answer · 2020-02-13T12:41:32

In this case this.dates is a function and not an array. The error indicates that it's not undefined, yet it doesn't have includes method.

mapGetters should provide getters for computed properties. There's no way how mapGetters could be applied to methods and make this.dates to be an array.

It should be:

  methods: {
    ...mapActions([ 
      'updatePickedDates'
    ])
  },
  computed: {
    ...mapGetters([
      'dates'
    ]),
  }

Mutating Vuex array that is used in different component

1 Answers