当前位置：首页 > news >正文

Vuex 介绍及示例

news 2025/8/5 23:26:24

Vuex 是 Vue.js 的一个状态管理模式和库，用于管理 Vue 应用中的全局状态。它是专门为 Vue.js 应用设计的，充分利用了 Vue 的细粒度响应系统来高效地更新状态。以下是对 Vuex 的一些介绍和它的基本使用方法：

主要概念

State（状态）：
Vuex 使用单一状态树（single state tree）来管理整个应用的状态。这个状态存储在一个对象中，整个应用的所有组件都可以访问这个对象中的数据。
Getter（计算属性）：
Vuex 中的 getter 类似于 Vue 的计算属性（computed properties）。它们可以对 state 进行派生操作并返回结果。
Mutation（变更）：
Vuex 中唯一能更改状态的方法就是提交 mutation。mutation 必须是同步函数。
Action（动作）：
action 类似于 mutation，不同的是：
- action 提交 mutation 而不是直接变更状态。
- action 可以包含任意异步操作。
Module（模块）：
由于使用单一状态树，应用中所有的状态会集中到一个大对象。当应用变得非常复杂时，store 对象会变得相当臃肿。为了解决这个问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、getter、mutation 和 action。

安装

首先需要安装 Vuex：

```bash
npm install vuex@next --save
```

然后在 Vue 应用中使用它：

```javascript
import { createApp } from ‘vue’;
import { createStore } from ‘vuex’;
import App from ‘./App.vue’;

// 创建一个新的 store 实例
const store = createStore({
state() {
return {
count: 0
};
},
mutations: {
increment(state) {
state.count++;
}
},
actions: {
incrementAsync({ commit }) {
setTimeout(() => {
commit(‘increment’);
}, 1000);
}
},
getters: {
doubleCount(state) {
return state.count * 2;
}
}
});