uniapp: vuex $store的值为undefined

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++的宏定义的不了解，不知道代码块的运行机制。

宏定义的学习资料