Vue3搭配Vuex4开发购物车时Store不生效页面空白无内容

存在的错误点 #

• store/index.js中冗余了无效的应用实例创建代码：你错误复制了main.js的逻辑，在store文件中导入了createApp、创建了未引入App组件的应用实例、还错误调用app.use(createStore)，这部分代码完全不需要，反而会引发运行异常。
• Vuex配置项拼写错误：Vuex中定义同步状态修改逻辑的配置项为mutations（复数形式），你的代码写为单数mutation，导致commit('getProductData')调用时找不到对应处理函数，state中的products永远为空数组，商品列表没有数据可渲染，所以页面显示空白。

修复后的完整代码 #

store/index.js（其他文件无需修改） #

import { createStore } from 'vuex'
import products from '../mock/products.json'

export default createStore({
    state: {
        products: [],
        cart: [],
    },
    getters: {
        products: state => state.products,
        cart: state => state.cart,
    },
    actions: {
        getProducts({commit}) {
            commit('getProductData');
        },
    },
    // 修正为复数形式mutations
    mutations: {
        getProductData(state) {
            state.products = products;
        },
    },
})

修复完成后重新启动项目，即可正常渲染商品列表。

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