Vue 状态管理工具vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 解决了多个组件共享状态时，状态的可维护性和可预测性问题。
Vuex 的核心概念
-
State（状态）：
Vuex 使用单一状态树（Single Source of Truth），即用一个对象就包含了全部的应用层级状态。这意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一状态片段，在调试过程中也能轻易地取得整个当前应用状态的快照。 -
Getters（获取器）：
store 的计算属性，允许我们从 store 的 state 中派生出一些状态。 -
Mutations（变更）：
Vuex 中的 mutations 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更新的地方，并且它会接受 state 作为第一个参数。 -
Actions（动作）：
Action 提交 mutation，而不是直接变更状态。Action 可以包含任意异步操作。 -
Modules（模块）：
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决这个问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter，甚至是嵌套子模块——从上至下进行同样方式的分割。
使用 Vuex 的步骤
-
安装 Vuex：
如果你使用 npm，可以通过以下命令安装 Vuex：npm install vuex --save -
创建 Store：
创建一个新的.js文件（例如store.js），并在其中引入 Vue 和 Vuex，然后定义和导出 Vuex store。 -
在 Vue 应用中使用 Store：
在 Vue 应用中，通过 Vue 的实例选项store使用这个 store。 -
在组件中使用 State、Getters、Mutations 和 Actions：
- 使用
this.$store.state.xxx来访问 state。 - 使用
mapState、mapGetters、mapMutations、mapActions辅助函数在组件中更简洁地访问这些 Vuex 特性。
- 使用
示例
store.js：
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
}
},
actions: {
increment({ commit }) {
commit('increment');
}
},
getters: {
count: state => state.count
}
});
main.js：
import Vue from 'vue';
import App from './App.vue';
import store from './store';
Vue.config.productionTip = false;
new Vue({
store,
render: h => h(App)
}).$mount('#app');
组件中：
<template>
<div>
<p>{{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
export default {
computed: {
...mapState(['count'])
},
methods: {
...mapActions(['increment'])
}
};
</script>
Vuex 提供了结构化和可预测的状态管理，非常适合构建大型的单页应用（SPA）。通过集中管理应用的状态，Vuex 使得状态管理变得更加简单和可维护。