1. 前言
从第一次接触
Vuex到现在也快1年多了，平时项目中的使用都是模块化的一套代码，最近面试了一些同学，发现大家对这一块的理解不是很详细。刚好最近也没有那么忙了。所以抽出一些时间重新过了一遍相关文档，一方面是加固自己对Vuex的理解。另一方面也防止以后自己忘记了想拿起时总是找不到相关文档。
2. 什么是Vuex
这是官方给出的解释，不得不说Vue的官方文档是真的良心。你无需去看视频，找其它资料就可以通过他的文档完成入门和编写代码。但是设计到高阶的一些使用方法的时候，我总是很难通过文档快速的熟悉和在项目中使用。
就我个人理解的话，
Vuex就是一个统一的全局状态管理。就是你在state中定义了一个数据之后，你可以在所在项目中的任何一个组件里进行获取、进行修改，并且你的修改可以得到全局的响应变更。
3. 如何使用
3.1 如何安装引入Vuex
如果我们是通过Vue UI去创建一个v-cli 3.x项目的话，我们可以在配置插件的过程中直接安装Vuex。安装后我们src目录下就会出现一个store文件夹，该目录下也会自动生成一个index.js文件，里面内容如下：
import Vue from "vue";
import Vuex, { Store } from "vuex";
Vue.use(Vuex);
const store = new Store({
state: {},
getters: {},
mutations: {},
actions: {},
});
export default store;
同时main.js文件中也会帮我们自动引入，这样一来就可以在任何一个组件里面使用this.$store了：
import store from "./store";
export const app = new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
3.2 Vuex的核心
-
state
上文提到Vuex就是在不同的组件中操作state，那么要如何操作它呢。首先我们在state下新增一些变量。
import Vue from "vue";
import Vuex, { Store } from "vuex";
Vue.use(Vuex);
const store = new Store({
state: {
//要设置的初始属性值
showMyName: true,
age: 17
},
getters: {},
mutations: {},
actions: {},
});
export default store;
现在你可以在任意一个组件中通过
this.$store.state.showMyName
this.$store.state.age
来获取showMyName和age的值了。
-
getters
官方并不推荐使用this.$store.state.xxx方式去获取相应的值。而是提供了getters这个API去实时监听state值的变化。对应的我们可以通过这个API去实时的获取state中值的最新状态。
import Vue from "vue";
import Vuex, { Store } from "vuex";
Vue.use(Vuex);
const store = new Store({
state: {
//要设置的初始属性值
showMyName: true,
age: 17
},
getters: {
//实时监听state值的变化(最新状态)
isNameShow(state) {
return state.showMyName;
},
getAge(state) {
return state.age;
},
},
mutations: {},
actions: {},
});
export default store;
此时我们可以通过this.$store.getters.isNameShow来实时监听state的值的改变并获取，当然我们也可以改造一下getters内的方法
getters: {
//实时监听state值的变化(最新状态)
isNameShow(state) {
return state.showMyName;
},
getAge(state) {
return `I am ${ state.age } years old`;
},
},
这样我们可以监听state中age的改变，并加工返回我们想要的文案。
注:getters中的方法第一个参数为state，也可以接受其他getters作为第二个参数。
-
mutations
getters是用来监听state的改变的，那么问题来了怎么去改变state呢。接下来就该mutations登场了。mutattions也是一个对象，这个对象里面可以放改变state的初始值的方法。
import Vue from "vue";
import Vuex, { Store } from "vuex";
Vue.use(Vuex);
const store = new Store({
state: {
//要设置的初始属性值
showMyName: true,
age: 17
},
getters: {
//实时监听state值的变化(最新状态)
isNameShow(state) {
return state.showMyName;
},
getAge(state) {
return state.age;
},
},
mutations: {
changeNameShow(state, flag) {
state.showMyName = flag;
},
changeAge(state, num) {
state.age = num;
}
},
actions: {},
});
export default store;
与getters类似的是mutations里的方法同样接受两个参数，state和payload，payload就是需要修改state后的赋值。此时我们可以在其他组件中这样去修改state的中的值。
this.$store.commit("changeNameShow", show);
this.$store.commit("changeAge", 18);
-
actions
有的同学可能会疑惑我们通过上面的3个API明明都可以实现定义值，监听值和改变值。那么为什么还要使用这个API呢。
因为在
Vuex中，mutations里面的方法都是同步事务，意思就是说：比如这里的一个this.store.commit("changeAge", num)方法，两个组件里用执行这个方法后得到的值，每次都是一样的。这个时候就该actions登场了。
改造一下已有的代码：
import Vue from "vue";
import Vuex, { Store } from "vuex";
Vue.use(Vuex);
const store = new Store({
state: {
//要设置的初始属性值
showMyName: true,
age: 17
},
getters: {
//实时监听state值的变化(最新状态)
isNameShow(state) {
return state.showMyName;
},
getAge(state) {
return state.age;
},
},
mutations: {
changeNameShow(state, flag) {
state.showMyName = flag;
},
changeAge(state, num) {
state.age = num;
}
},
actions: {
commitChangeShow(context, flag) {
context.commit("changeNameShow", flag);
},
commitChangeAge(context, num) {
context.commit('changeAge', num);
}
},
});
export default store;
这个actions也是个对象变量，最大的作用就是里面的Action方法可以包含任意异步操作，这里面的方法是用来异步触发mutations里面的方法，actions里面自定义的函数接收一个context参数和要变化的形参，context与store实例具有相同的方法和属性。
最后在其他组件里使用
this.$store.dispatch("commitChangeShow", false) ;
this.$store.dispatch("commitChangeAge", 18) ;
自此，完整的状态管理流程就走完了。我们可以在页面的各个地方对状态进行修改和管理，做到真正的一呼百应了。
4. 结语
后面关于modules 模块化以及组件中引入 mapGetters、mapActions和 mapStates的使用我会在下一篇文章中详细说明。告诉大家如何优雅的使用Vuex。
最后，喜欢的话请点个赞呗❤️❤️。
