请从以下方面进行排错:
1.代码拼写出错
首先检查自己的代码是否跟你参考的老师的代码一致,避免出现namesapced少了'd',modules少了's'的情况,
2.vue版本导致的调用问题
黑马老师视频教程使用的是vue2,但是现在安装的hbuilder最新版项目模板都是配的vue3,使用方法有差别,导致的无法正常运行
要查自己的vue版本,可以在项目文件夹中打开命令窗,然后输入 npm list vue 就可以查看自己项目装的vue版本
store.js修改前的代码:(放出来给大家做一个参照,
store.js修改后的正确代码:
(一定要把前面多余的代码注释掉,不然会产生报错,比如说Vue.use(Vuex),这句要是忘记注释会导致更多的报错
//导入的东西变了,注意原来的该删的删掉或者注释掉,不然vue2vue3混用会报错
import {createStore} from 'vuex'
import moduleCart from '@/store/cart.js'
// 3. 创建 Store 的实例对象
const store = createStore({
// TODO:挂载 store 模块
modules: {
'm_cart': moduleCart,
},
})
// 4. 向外共享 Store 的实例对象
export default store
cart.js文件:这个倒没什么
export default{
namespaced: true,
state:()=>({
// 用于存放信息
//goods_id,goods_name,goods_price,goods_count,goods_small_logo,goods_state
cart: [],
}),
mutations:{},
getters:{},
}
main.js文件配置方法也不一样(注意看我写的注释:
//...省略了前面的代码,在你的main.js中找到下面第一行代码,
//后面的代码多注意我的代码和你的的区别,然后进行修改
app.$mount()
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue'
import store from '@/store/store.js' //这一句注意
import App from './App.vue'
export function createApp() {
const app = createSSRApp(App)
app.use(store) //这句别漏了
return {
app
}
}
// #endif
最后一步,在goods_detail.vue中进行调用测试:(注意看代码中注释
<template>
//...省略无关紧要代码,只要在你原本能正常显示文本的地方
//加上{{cart.length}},运行无报错,能显示数字就行
<view class="goods_express">快递:免运费 -- {{cart.length}}</view>
//..。省略无关紧要代码
</template>
<script>
import {mapState} from 'vuex' //注意导入位置应在这里
export default {
//要写computed对象,与data平级
computed:{
// 调用 mapState 方法,把 m_cart 模块中的 cart 数组映射到当前页面中,作为计算属性来使用
// ...mapState('模块的名称', ['要映射的数据名称1', '要映射的数据名称2'])
...mapState('m_cart',['cart'])
},
data() {
//...略
},
</script>
成功显示: