uni-app怎么使用Vuex进行状态管理-uni-app-PHP中文网

this.$store为undefined是因为uni-app虽内置vuex但不自动创建和挂载store：必须在src/store/index.js中用new vuex.store()导出实例，并在main.js的new vue({store})中显式挂载，缺一不可。

uni-app 项目里直接用 vuex，不需要 npm install，但不手动初始化并挂载到 vue 实例，this.$store 就是 undefined —— 这是最常卡住开发者的硬性门槛。

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

uni-app 内置了 Vuex，但不会自动创建 store 实例，也不会自动挂载。你必须自己做两件事：在 src/store/index.js 中用 new Vuex.Store() 构造并导出实例；再在 main.js 的 new Vue({}) 里显式传入 store 选项。

常见错误包括：

写了 export default { state: {} } —— 这只是个普通对象，不是 Vuex store
import store from '@/store' 却没配 webpack alias，路径解析失败
main.js 里漏掉 store 字段，比如写成 new Vue({ render: h => h(App) })
store 文件放在 store/main.js 或其他非 index.js 入口，导致导入失败

`store/index.js` 必须怎么写？

必须调用 Vuex.Store 构造函数，且提前调用 Vue.use(Vuex)。最小可用结构如下：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    token: '',
    userInfo: null
  },
  mutations: {
    setToken(state, token) {
      state.token = token
    },
    setUserInfo(state, userInfo) {
      state.userInfo = userInfo
    }
  }
})

注意：

不能省略 Vue.use(Vuex)，否则后续模块或插件可能失效
state 里的初始值要设合理默认值（如 userInfo: null），避免页面在 store 初始化前就读取空对象报错
如果用了模块（modules），每个模块文件（如 modules/user.js）必须默认导出含 state（不能是函数）、mutations 等字段的对象

组件里怎么安全读写状态？

绕过 mutations 直接改 state，视图不更新、devtools 不记录、调试时等于“隐身”。

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

正确姿势：

读取：用 computed + mapState 或直接访问 this.$store.state.xxx
同步修改：必须通过 this.$store.commit('mutationName', payload)
异步操作（如登录请求后存 token）：走 actions，用 this.$store.dispatch('actionName', payload)
不要在 data() 里缓存 state 副本，否则 store 更新后副本不会变

例如登录成功后存 token：

mutations: {
  setToken(state, token) {
    state.token = token
  }
},
actions: {
  login({ commit }, { token, userInfo }) {
    // 本地持久化可放这里，也可在 mutation 里做
    uni.setStorageSync('token', token)
    commit('setToken', token)
  }
}

跨页面/多端状态一致性要注意什么？

H5、小程序、App 三端的 this.$store 行为一致，但有两点容易被忽略：

App 端若用 nvue 页面，只要该页面由 vue 页面引入或通过 uni.navigateTo 正常跳转，$store 就可用；但如果是原生跳转或独立启动，不保证 store 实例已就绪
App.vue 的 onLaunch 是最早 JS 执行时机，但某些页面（尤其首页）可能在 store 初始化完成前就渲染完毕，导致 mapState 取到初始默认值而非真实状态 —— 解决办法是 state 初始值别设 false 或 ''，而用 null 或 undefined，并在组件中加判空逻辑