vuex

### Vuex 的核心概念与使用方法 Vuex 是专门为 Vue.js 设计的一个状态管理模式，用于集中管理应用中的状态。通过 Vuex，可以更方便地处理组件间的全局状态以及复杂的组件间通信。 #### 1. 安装与初始化 在项目中引入 Vuex 需要先安装依赖包 `vuex` 并将其注册为 Vue 插件[^1]： ```javascript import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { count: 0, }, mutations: {}, actions: {}, getters: {} }); export default store; ``` #### 2. 创建简单的 Vuex Store 创建一个基本的 Vuex Store 可以定义四个主要部分：`state`, `mutations`, `actions`, 和 `getters`[^1]。下面是一个完整的简单示例： ```javascript // store/index.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { // 存储数据的地方 count: 0, }, mutations: { // 同步修改 state 的唯一方式 increment(state) { state.count++; } }, actions: { // 提交 mutation 的地方，支持异步操作 incrementAsync({ commit }) { setTimeout(() => { commit('increment'); }, 1000); } }, getters: { // 访问经过计算后的 state 数据 doubleCount(state) { return state.count * 2; } } }); ``` #### 3. 模块化组织状态 对于较大的应用程序，推荐将 Vuex Store 划分为模块来提高可维护性和清晰度[^2]。每个模块都可以拥有自己的 `state`, `mutations`, `actions`, 和 `getters`: ```javascript // store/modules/exampleModule.js const exampleModule = { namespaced: true, // 开启命名空间 state() { return { text: 'Hello Vuex Module', }; }, mutations: { updateText(state, newText) { state.text = newText; } }, actions: { changeText({ commit }, payload) { commit('updateText', payload); } }, getters: { getText(state) { return state.text.toUpperCase(); } } }; export default exampleModule; // store/index.js import Vue from 'vue'; import Vuex from 'vuex'; import exampleModule from './modules/exampleModule'; Vue.use(Vuex); export default new Vuex.Store({ modules: { example: exampleModule } }); ``` #### 4. 状态持久化 为了防止页面刷新丢失状态，可以通过插件 `vuex-persistedstate` 将 Vuex 中的状态保存到浏览器的本地存储中[^3]: ```bash npm install vuex-persistedstate ``` 配置如下所示： ```javascript // store/index.js import createPersistedState from 'vuex-persistedstate'; import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { user: null, }, plugins: [ createPersistedState() ] }); ``` #### 5. Vuex 常见问题解答 - **何时应该使用 Vuex?** 当存在多组件共享状态、组件间通信复杂或者需要多个视图监听同一状态变化时，建议采用 Vuex 来统一管理和分发这些状态[^3]。 - **如何与 Vue Router 结合使用？** 可以在路由守卫中调用 Vuex 的 action 方法完成权限校验或其他逻辑处理[^3]: ```javascript router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !store.getters.isAuthenticated) { next('/login'); // 如果未登录则跳转至登录页 } else { next(); // 继续导航 } }); ``` --- ###