Vuex的属性

### Vuex 属性介绍及功能 #### 1. **State** `state` 是 Vuex 的核心，用于存储应用中的全局状态。它是一个单一的状态树，所有的组件都可以访问到这个状态树中的数据。通过 `this.$store.state.xxx` 可以在组件中访问到定义在 `state` 中的数据[^1]。 代码示例： ```javascript const store = new Vuex.Store({ state: { count: 0 } }); ``` #### 2. **Mutations** `mutations` 定义了修改 `state` 的方法。它是同步的，并且只能通过 `this.$store.commit('mutationName', payload)` 来调用。直接修改 `state` 中的数据是不被允许的，必须通过 `mutations` 进行[^1]。 代码示例： ```javascript const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++; } } }); ``` 调用方式： ```javascript this.$store.commit('increment'); ``` #### 3. **Actions** `actions` 类似于 `mutations`，但它的主要作用是处理异步操作。它可以包含多个异步任务，并最终通过 `commit` 触发 `mutations` 来更新 `state`。通过 `this.$store.dispatch('actionName', payload)` 调用[^4]。 代码示例： ```javascript const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++; } }, actions: { asyncIncrement({ commit }) { setTimeout(() => { commit('increment'); }, 1000); } } }); ``` 调用方式： ```javascript this.$store.dispatch('asyncIncrement'); ``` #### 4. **Getters** `getters` 可以看作是 Vuex 的计算属性，主要用于从 `state` 中派生出一些状态。它可以在多组件之间复用，并且可以通过 `this.$store.getters.xxx` 访问[^2]。 代码示例： ```javascript const store = new Vuex.Store({ state: { todos: [ { id: 1, text: 'Learn JavaScript', done: true }, { id: 2, text: 'Learn Vue', done: false } ] }, getters: { doneTodos: state => { return state.todos.filter(todo => todo.done); } } }); ``` 调用方式： ```javascript this.$store.getters.doneTodos; ``` #### 5. **Modules** Vuex 允许将 store 分割成模块（modules），每个模块拥有自己的 `state`、`mutations`、`actions` 和 `getters`。模块化可以提高代码的可维护性和可读性[^1]。 代码示例： ```javascript const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } }; const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } }; const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }); // 访问模块中的状态 store.state.a; // -> 模块A的状态 store.state.b; // -> 模块B的状态 ``` ### 使用场景 Vuex 适用于单页应用中需要跨组件共享的状态管理场景，例如音乐播放器的播放状态、用户的登录状态、购物车的商品列表等[^1]。 ### 总结 - **State**：存放全局状态。 - **Mutations**：同步修改状态。 - **Actions**：异步操作并最终触发 `mutations` 修改状态。 - **Getters**：派生状态，类似于计算属性。 - **Modules**：模块化 Vuex store，便于管理复杂状态。 ```javascript const store = new Vuex.Store({ state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... }, modules: { ... } }); ```