时间戳

首页 > 解决方案 > 变异用于不同组件的 Vuex 数组

vue.js - 变异用于不同组件的 Vuex 数组

问题描述

在第一个组件中，我有一个函数使用存储在 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}
 }

在另一个组件中

我使用来自 VueX 的 getter，它在这个数组上传递：

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

但是，当resetArray()函数运行时，我得到错误 state.pickedDates.includes is not a function

以下是我的 VueX 商店中的 getter 和 mutation：

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

标签： vue.jsvuejs2vuex

解决方案

在这种情况下this.dates是一个函数而不是一个数组。该错误表明它不是未定义的，但它没有includes方法。

mapGetters应该为计算属性提供 getter。没有办法如何 mapGetters应用methods并使其this.dates成为一个数组。

它应该是：

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

推荐阅读