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

uni-app中需手动创建并挂载Vuex Store实例，路径必须为src/store/index.js，用new Vuex.Store()构造，main.js中显式传入store选项，否则this.$store为undefined；修改state必须通过commit mutations，读取推荐mapState或computed。

uni-app怎么使用vuex管理状态

uni-app 项目里直接用 Vuex，不需要 npm install vuex，但必须手动创建 store 实例并挂载到 Vue 实例，否则所有组件访问 this.$store 都会是 undefined。

store/index.js 必须用 `new Vuex.Store()` 显式构造

很多人写成 export default { state: {} }，这只是一个普通对象，不是 Vuex store，this.$store 无法识别。正确做法是：

import Vuex from 'vuex' 后必须调用 Vuex.Store 构造函数
路径必须是 src/store/index.js（或项目根目录下的 store/index.js），其他位置如 store/main.js 不会被自动识别
如果拆模块，modules/user.js 必须 export default 一个含 state（不能是函数）、mutations 等字段的对象

最小可用示例：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

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

main.js 中必须显式传入 `store` 选项

不挂载，this.$store 就不存在。常见错误包括：

漏写 store 字段：new Vue({ render: h => h(App) }) —— 缺失挂载
路径写错：比如 import store from '@/store' 却没配 webpack alias
在 Vue3 项目中误用 Vue2 写法（或反之）：uni-app Vue2 项目用 new Vuex.Store；Vue3 项目应改用 createStore，且挂载方式不同

main.js 关键片段（Vue2）：

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

import Vue from 'vue'
import App from './App.vue'
import store from './store' // ← 路径必须对

Vue.config.productionTip = false

const app = new Vue({
  store, // ← 必须显式传入
  render: h => h(App)
})
app.$mount()

修改 state 必须走 `commit`，不能直接赋值

直接写 this.$store.state.count = 5 不会触发响应式更新、不会被 vue-devtools 捕获、getters 也不会重算。这是最常踩的坑。

同步修改只能通过 mutations：在组件中调用 this.$store.commit('setCount', 5)
异步操作必须走 actions：比如登录后请求接口再存 token，得用 this.$store.dispatch('login', credentials)
读取推荐用 mapState 或 computed，不要在 data() 里缓存副本，否则 store 更新后副本不会变