【uniapp】新手求助！vuex的问题，为什么会报module namespace not found in xxx？-灵析社区

 有哪位大佬能够帮我看看这个vuex的问题，按照网上搜索得到的，翻来覆去弄了一个小时，该检查的我都已经去检查过了，包括命名空间、导入、注册等等，感觉都没有错误，但就是报找不到state和mutation，很邪门。。。 功能实现是：goods_detail页面点击“加入购物车”，然后同步购物车数据到各个模块 涉及到的页面是goods_detail.vue、store.js、cart.js、main.js 先谢过大家！！！ 以下是三个页面完整代码： 1.goods_detail.vue ￥{{goods_info.goods_price}} {{goods_info.goods_name}} 收藏 快递：免运费 import { mapState } from 'vuex' // 按需导入 mapMutations 这个辅助方法 import { mapMutations } from 'vuex' export default { computed: { ...mapState('m_cart', ['cart']) }, data() { return { // 商品详情对象 goods_info: {}, // 渲染商品导航区域的 UI 结构 // 左侧按钮组的配置对象 options: [{ icon: 'shop', text: '店铺' }, { icon: 'cart', text: '购物车', info: 2 }], // 右侧按钮组的配置对象 buttonGroup: [{ text: '加入购物车', backgroundColor: '#ff0000', color: '#fff' }, { text: '立即购买', backgroundColor: '#ffa200', color: '#fff' } ] }; }, onLoad(options) { // 获取商品 Id const goods_id = options.goods_id // 调用请求商品详情数据的方法 this.getGoodsDetail(goods_id) }, methods: { // 把 m_cart 模块中的 addToCart 方法映射到当前页面使用 ...mapMutations('m_cart', ['addToCart']), // 定义请求商品详情数据的方法 async getGoodsDetail(goods_id) { const ans = uni.$http.get('/api/public/v1/goods/detail', { goods_id }) console.log(ans) const { data: res } = await uni.$http.get('/api/public/v1/goods/detail', { goods_id }) if (res.meta.status !== 200) return uni.$showMsg() // 使用字符串的 replace() 方法，为 img 标签添加行内的 style 样式，从而解决图片底部空白间隙的问题 res.message.goods_introduce = res.message.goods_introduce.replace(/ x.pics_big) }) }, // 左侧按钮的点击事件处理函数 onClick(e) { console.log(e) if (e.content.text === '购物车') { // 切换到购物车页面 uni.switchTab({ url: '/pages/cart/cart' }) } }, // 右侧按钮的点击事件处理函数 buttonClick(e) { // 1. 判断是否点击了 加入购物车 按钮 if (e.content.text === '加入购物车') { // 2. 组织一个商品的信息对象 const goods = { goods_id: this.goods_info.goods_id, // 商品的Id goods_name: this.goods_info.goods_name, // 商品的名称 goods_price: this.goods_info.goods_price, // 商品的价格 goods_count: 1, // 商品的数量 goods_small_logo: this.goods_info.goods_small_logo, // 商品的图片 goods_state: true // 商品的勾选状态 } // 3. 通过 this 调用映射过来的 addToCart 方法，把商品信息对象存储到购物车中 this.addToCart(goods) } } } } swiper { height: 750rpx; image { width: 100%; height: 100%; } } // 商品信息区域的样式 .goods-info-box { padding: 10px; padding-right: 0; .price { color: #c00000; font-size: 18px; margin: 10px 0; } .goods-info-body { display: flex; justify-content: space-between; .goods-name { font-size: 13px; padding-right: 10px; } // 收藏区域 .favi { width: 120px; font-size: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-left: 1px solid #efefef; color: gray; } } // 运费 .yf { margin: 10px 0; font-size: 12px; color: gray; } .goods-detail-container { // 给页面外层的容器，添加 50px 的内padding， // 防止页面内容被底部的商品导航组件遮盖 padding-bottom: 50px; } .goods_nav { /* #ifndef APP-NVUE */ display: flex; /* #endif */ flex-direction: column; position: fixed; left: 0; right: 0; /* #ifdef H5 */ left: var(--window-left); right: var(--window-right); /* #endif */ bottom: 0; } } 2.store.js // 1. 导入 Vue 和 Vuex import Vue from 'vue' import Vuex from 'vuex' // 导入购物车的 vuex 模块 import moduleCart from './cart.js' // 2. 将 Vuex 安装为 Vue 的插件 Vue.use(Vuex) // 3. 创建 Store 的实例对象 const store = new Vuex.Store({ // TODO：挂载 store 模块 modules: { // 挂载购物车的 vuex 模块，模块内成员的访问路径被调整为 m_cart，例如： // 购物车模块中 cart 数组的访问路径是 m_cart/cart m_cart: moduleCart, }, }) // 4. 向外共享 Store 的实例对象 export default store 3.cart.js export default { // 为当前模块开启命名空间 namespaced: true, // 模块的 state 数据 state: () => ({ // 购物车的数组，用来存储购物车中每个商品的信息对象 // 每个商品的信息对象，都包含如下 6 个属性： // { goods_id, goods_name, goods_price, goods_count, goods_small_logo, goods_state } cart: [], }), // 模块的 mutations 方法 mutations: { addToCart(state, goods) { // 根据提交的商品的Id，查询购物车中是否存在这件商品 // 如果不存在，则 findResult 为 undefined；否则，为查找到的商品信息对象 const findResult = state.cart.find((x) => x.goods_id === goods.goods_id) console.log(findResult) if (!findResult) { // 如果购物车中没有这件商品，则直接 push state.cart.push(goods) } else { // 如果购物车中有这件商品，则只更新数量即可 findResult.goods_count++ } console.log(state.cart) } }, // 模块的 getters 属性 getters: {}, } 4.main.js import App from './App' import store from './store' // 导入网络请求的包 import {$http} from '@escook/request-miniprogram' // 将按需导入的 $http 挂载到 wx 顶级对象之上，方便全局调用 uni.$http = $http // 配置请求拦截器 $http.beforeRequest = function(){ uni.showLoading({ title:'数据加载中......' }) } // 配置响应拦截器 $http.afterRequest = function(){ uni.hideLoading() } // 请求根路径 https://api-hmugo-web.itheima.net https://www.uinav.com $http.baseUrl = 'https://api-hmugo-web.itheima.net' // 封装请求结果状态信息的弹框方法 uni.$showMsg = function(title = '数据请求失败！', duration = 1500){ uni.showToast({ title, duration, icon:'none' }) } // #ifndef VUE3 import Vue from 'vue' Vue.config.productionTip = false Vue.prototype.$store = store Vue.prototype.$adpid = "1111111111" Vue.prototype.$backgroundAudioData = { playing: false, playTime: 0, formatedPlayTime: '00:00:00' } App.mpType = 'app' const app = new Vue({ store, ...App }) app.$mount() // #endif // #ifdef VUE3 import { createSSRApp } from 'vue' export function createApp() { const app = createSSRApp(App) app.use(store) app.config.globalProperties.$adpid = "1111111111" app.config.globalProperties.$backgroundAudioData = { playing: false, playTime: 0, formatedPlayTime: '00:00:00' } return { app } } // #endif