黑马优购p141_uniapp报错Cannot read property ‘state‘ of undefined

请从以下方面进行排错:

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>

成功显示:

  • 5
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值