uniapp: vuex $store的值为undefined

如标题,在生命周期函数打印 $store 的值为undefined

且报错: TypeError: Cannot read property ‘state’ of undefined

请添加图片描述
因为只是最基础的vuex的使用,而且反复对比了代码并没有问题,所以很困惑出错的原因。

为了找到出错原因 , 笔者采用页面局部使用vuex的方法,发现能够正常输出值。

// homepage.vue 页面
import store from '@/store/index.js'

console.log(store.state.count)   // 输出 6 (设置的值)

由此,可以把问题原因定位到

**

在main.js中没有成功挂载 store

**

打开main.js,发现uniapp 的默认的 挂载实例的方法有两个,分别在两个代码块中

// #ifndef VUE3
console.log('不是vue3环境 - 执行代码块')
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()
// #endif


// #ifdef VUE3
console.log('是vue3环境 - 执行代码块')
import { createSSRApp } from 'vue'
import App from './App.vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app,
	store
  }
}
// #endif

而store的挂载代码 只在第二个代码块中有挂载,而在第一个代码块中没有挂载。
至此,问题原因已经找到。

在两个代码块中,分别console
在这里插入图片描述
如上图可知: 编译时只进入了 不是vue3环境 的代码块区域 。而在该区域内,没有引入 store 对象, 所以报错

**

解决方法: 在 该代码块中 ,在store挂载到vue实例对象上

**

const app = new Vue({
    ...App,
	store
})

总结: 对c,c++的宏定义的不了解,不知道代码块的运行机制。

宏定义的学习资料

Logo

前往低代码交流专区

更多推荐