什么是 Vuex?
Vuex
是 Vue.js 官方提供的状态管理模式,专为 Vue.js 应用设计。它通过集中式存储管理应用中所有的组件状态,允许组件之间更方便地共享数据,并提供了一套规则来确保状态以可预测的方式发生变化。Vuex 对大型应用尤其有用,因为它将组件中的状态提取到外部,并通过全局状态管理器进行集中管理。
Vuex 提供了响应式的数据存储,与 Vue 组件深度集成,这意味着当状态发生变化时,所有依赖该状态的组件会自动更新。
为什么需要 Vuex?
在小型应用中,组件之间的状态可以通过父子组件通信或事件总线来管理。然而,当应用逐渐变大,组件间的状态变得复杂时,这种方法就显得笨拙且难以维护。这时,我们可以使用 Vuex
作为统一的状态管理工具,以确保整个应用状态的一致性和可预测性。
Vuex 的核心概念
Vuex 由以下几个核心部分组成:
-
State:状态,存储应用的全局数据。
-
Getters:计算属性,用于派生状态数据。
-
Mutations:同步操作,用于改变状态。
-
Actions:异步操作,用于处理业务逻辑,并通过提交 mutations 改变状态。
-
Modules:将状态和逻辑划分成多个模块,便于管理。
Vuex 的安装
首先,需要安装 vuex
。
npm install vuex --save
// src/store/index.js
import { createStore } from 'vuex';
const store = createStore({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
}
},
actions: {
incrementAsync({ commit }) {
setTimeout(() => {
commit('increment');
}, 1000);
}
},
getters: {
doubleCount(state) {
return state.count * 2;
}
}
});
export default store;
在 main.js
中注册 Vuex
:
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';
const app = createApp(App);
app.use(store);
app.mount('#app');
使用 Vuex 管理状态
1. State - 存储全局状态
State
是存储全局状态数据的地方,类似于组件中的 data
。在组件中,我们可以通过 this.$store.state
来访问 Vuex 中的状态。
const store = createStore({
state: {
count: 0
}
});
在组件中使用 state
:
<template>
<div>
<p>当前计数:{{ count }}</p>
</div>
</template>
<script>
export default {
computed: {
count() {
return this.$store.state.count;
}
}
};
</script>
2. Mutations - 修改状态
Mutations
是用于修改 state
的方法,通常是同步的。我们通过 commit
函数来调用 mutations
。
const store = createStore({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
}
}
});
在组件中调用 mutations
来修改状态:
<template>
<div>
<p>当前计数:{{ count }}</p>
<button @click="increment">增加计数</button>
</div>
</template>
<script>
export default {
computed: {
count() {
return this.$store.state.count;
}
},
methods: {
increment() {
this.$store.commit('increment');
}
}
};
</script>
3. Getters - 计算属性
Getters
类似于组件中的 computed
,用于从 state
中派生数据。
const store = createStore({
state: {
count: 0
},
getters: {
doubleCount(state) {
return state.count * 2;
}
}
});
在组件中使用 getters
:
<template>
<div>
<p>计数的两倍:{{ doubleCount }}</p>
</div>
</template>
<script>
export default {
computed: {
doubleCount() {
return this.$store.getters.doubleCount;
}
}
};
</script>
4. Actions - 异步操作
Actions
是用于处理异步操作的,通常用来提交 mutations
。在组件中调用 actions
时,我们使用 dispatch
函数。
const store = createStore({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
}
},
actions: {
incrementAsync({ commit }) {
setTimeout(() => {
commit('increment');
}, 1000);
}
}
});
在组件中调用 actions
:
<template>
<div>
<p>当前计数:{{ count }}</p>
<button @click="incrementAsync">异步增加计数</button>
</div>
</template>
<script>
export default {
computed: {
count() {
return this.$store.state.count;
}
},
methods: {
incrementAsync() {
this.$store.dispatch('incrementAsync');
}
}
};
</script>
5. Modules - 模块化管理状态
当应用变得复杂时,可以将 store
划分为多个 module
。每个模块有自己的 state
、mutations
、actions
和 getters
,并且模块可以嵌套。
const moduleA = {
state: () => ({ count: 0 }),
mutations: {
increment(state) {
state.count++;
}
},
getters: {
doubleCount(state) {
return state.count * 2;
}
}
};
const store = createStore({
modules: {
a: moduleA
}
});
在组件中访问模块的 state
和 getters
:
<template>
<div>
<p>模块A的计数:{{ count }}</p>
<p>计数的两倍:{{ doubleCount }}</p>
<button @click="increment">增加计数</button>
</div>
</template>
<script>
export default {
computed: {
count() {
return this.$store.state.a.count;
},
doubleCount() {
return this.$store.getters['a/doubleCount'];
}
},
methods: {
increment() {
this.$store.commit('a/increment');
}
}
};
</script>