vuex store getter 在组件中不起作用

Question

谁能看看为什么这不起作用，

尝试使用 vuex store 管理我的 axios 请求并传输到组件如下：

在我的 vuex 存储模块中，我有以下内容

import axios from "axios";
export const state = () => ({
    cases: [],
  })

  export const mutations = {

    listCases (state, cases) {
      state.cases = cases;
    },     
  }

  export const actions = {

    loadCases ({ commit, context }) {

      return axios.get('http')
      .then(res => {
        const convertCases = []
        for (const key in res.data) {
          convertCases.push({ ...res.data[key], id: key })
        }
        commit('listCases', convertCases)
      })
      .catch(e => context.error(e));
    },

  export const getters = {
  // return the state
    cases(state) {
      return state.cases
    }
  }

我检查了 amd 我的 axios 请求是否按预期返回我的结果并传递给突变

在我的组件中

import { mapMutations, mapGetters, mapActions } from 'vuex'

export default {

  created () {
    this.$store.dispatch('cases/loadCases');
  },

  computed: {
      ...mapGetters ({
      cases: 'cases/cases'
    })
},

</script>

现在我假设根据我所学到的我可以打电话给 这将退回我的物品。

但我得到一个错误情况没有定义，

请任何人告诉我我的错误

非常感谢

Answer 1

看这里：https://vuejs.org/v2/guide/list.html#Array-Change-Detection

您可以通过这种方式使其具有反应性：

export const mutations = {
  listCases (state, cases) {
    state.cases = [];
    cases.forEach((c) => {
      state.cases.push(c);
    });
  },     
}