Vuex无法存储接口产品数据，组件无法获取数据求助

问题背景 #

尝试将接口返回的产品数据存入Vuex，控制台已打印出正确的接口数据，但Vuex的state和getters始终为空数组，组件也无法展示数据。相关代码如下：

1. Vuex Store配置文件（index.js） #

import Vue from 'vue'
import Vuex from 'vuex'
import cart from "./modules/cart";
import createPersistedState from "vuex-persistedstate";
Vue.use(Vuex)
export default new Vuex.Store({
  plugins: [createPersistedState()],
  modules: {
    cart,
  }
})

2. axiosInstance文件 #

import axios from "axios"
const API_URL = 'http://localhost:5000/api/';
let headers = {}
const axiosInstance = axios.create({
    baseURL:API_URL,
    headers,
})
export default axiosInstance

3. cart.js模块文件 #

import axiosInstance from "../../helpers/axiosInstance";
const state = {
  products: [],
};
const getters = {
  allProducts: state => state.products
};
const actions = {
  getProducts({
    commit
  }) {
    return axiosInstance
      .get('/products')
      .then(response => {
        console.log(response)
        let products = response.data;
        commit('SET_PRODUCTS', products);
        console.log(products);
        return products;
      })
      .catch(error => console.log('Failed to fetch products', error));
  }
};
const mutations = {
  SAVE_PRODUCTS(state, products) {
    state.products = products;
  }
};
export default {
  state,
  getters,
  actions,
  mutations
};

4. 组件模板与脚本 #

<template>
  <div>
      <li
        v-for="product in products"
        :key="product.id"
      >
       {{ product.price }}
      </li>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
   computed: {
    ...mapGetters(['allProducts'])
  },
  mounted() {
    this.$store.dispatch('getProducts')
  }
};
</script>

问题原因 #

1. Mutation名称不匹配：action中提交的SET_PRODUCTS与mutations中定义的SAVE_PRODUCTS名称不一致，导致commit无法触发对应的mutation更新state。
2. 组件数据映射不匹配：组件computed中映射了allProducts getter，但模板中遍历的是未定义的products，无法获取到Vuex中的数据。
3. key值错误：接口返回的产品id字段是_id，但模板中使用product.id作为key，会导致Vue渲染警告。

修复方案 #

1. 修正Mutation名称匹配 #

修改cart.js中的action，将commit的mutation名称改为与定义一致的SAVE_PRODUCTS：

const actions = {
  getProducts({ commit }) {
    return axiosInstance
      .get('/products')
      .then(response => {
        console.log(response)
        let products = response.data;
        commit('SAVE_PRODUCTS', products); // 修正为正确的mutation名称
        console.log(products);
        return products;
      })
      .catch(error => console.log('Failed to fetch products', error));
  }
};

2. 修正组件数据映射 #

两种可选方案：

• 方案一：修改模板遍历的变量名
  将模板中的products改为allProducts，同时修正key值为接口返回的_id：

<template>
  <div>
      <li
        v-for="product in allProducts"
        :key="product._id"
      >
       {{ product.price }}
      </li>
  </div>
</template>

• 方案二：在computed中添加别名
  在组件的computed中新增products属性，指向allProducts，同时修正key值：

computed: {
  ...mapGetters(['allProducts']),
  products() {
    return this.allProducts;
  }
},

<li
  v-for="product in products"
  :key="product._id"
>
 {{ product.price }}
</li>

验证修改 #

完成上述修改后，重新运行项目：

• Vuex的state.products会正确存储接口返回的产品数据
• getters.allProducts会同步返回对应数据
• 组件模板能正常遍历并展示产品价格

内容的提问来源于stack exchange，提问作者jibzy