Question

任何人都可以看到为什么这不起作用，

尝试使用vuex存储管理我的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
    }
  }

我检查了我的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);
    });
  },     
}

vuex商店吸气剂无法在组件中工作

1 个答案: