uni-app中Vuex怎么实现全局状态管理-uni-app-PHP中文网

uni-app中this.$store为undefined的主因是未在main.js中挂载store实例，常见错误包括未执行vue.use(vuex)、store导出非vuex.store实例、main.js未传入store选项、路径别名配置错误等。

uni-app中vuex怎么实现全局状态管理

uni-app 里 Vuex 不是开箱即用的，必须手动创建 Store 实例并挂载到 Vue 实例，否则 this.$store 会是 undefined。

为什么 `this.$store` 总是 undefined

常见错误是只建了 store/index.js，但没在 main.js 中传入 store 选项。uni-app 内置 Vuex（Vue 2 项目对应 vuex@3.6.2），但不会自动初始化或挂载。

漏掉 Vue.use(Vuex) —— 尤其在模块化写法中容易忽略
store/index.js 导出的是普通对象（如 export default { state: {} }），而非 new Vuex.Store({}) 实例
main.js 中 new Vue({ render: h => h(App) }) 没加 store 字段
路径写错，比如 import store from '@/store' 却没配 @ 别名，导致导入失败

`store/index.js` 必须这么写

不能省略构造函数调用，也不能用 ES Module 默认导出一个配置对象。最小可用结构如下：

Vue

避免 Vue 常见错误——响应式陷阱、ref 与 reactive 区别、计算属性时机及 Composition API 陷阱。

下载

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    token: uni.getStorageSync('token') || ''
  },
  mutations: {
    SET_TOKEN(state, token) {
      state.token = token
      uni.setStorageSync('token', token)
    }
  },
  getters: {
    isLoggedIn: state => !!state.token
  }
})

state 初始化时建议从 uni.getStorageSync 读取，保证冷启动时状态一致
如果要用模块（modules），每个模块文件（如 modules/user.js）必须 export default 一个含 state（不能是函数）、mutations 等字段的对象
不要在 state 里放不可序列化的值（如函数、Date、RegExp），否则 H5 端可能报错

在组件里正确使用 `mapState` / `mapMutations`

不能直接修改 this.$store.state.xxx，必须通过 mutations；读取也推荐用 mapState 或 mapGetters，而不是反复写 this.$store.state。

mapState 必须放在 computed 里，例如：...mapState(['token']) 或 ...mapState('user', ['name'])（模块命名空间）
mapMutations 要放在 methods 里，例如：...mapMutations(['SET_TOKEN'])，然后在事件中调用 this.SET_TOKEN(newToken)
跨页面读写时，注意小程序端 onShow/onHide 生命周期不会自动触发响应式更新，需主动调用 this.$forceUpdate() 或依赖 watch 监听 getters