可用于登录的状态管理
一、vuex包含五个基本的对象：
state：存储状态，也就是变量；
getters：派生状态，就是set/get，中的get，有两个可选的参数；state、getters分别可以获取state中的变量和其他getters。外部的调用方式：store.getters.personInfo（）；和vue的computed类似。
mutations：提交状态修改，也是就set/get，中的set，这是vuex中唯一修改state的方式，但是不支持异步操作。第一个参数默认是state。外部调用的方式是this.store.commit（'SET_AVATAR', this.headerImg）；和vue中的methods类似。
actions：和mutations类似。只不过actions支持异步操作。第一个参数默认是和store具有相同参数属性的对象。外部调用方式：
this.$store.dispatch("SetMediaType", JSON.parse(JSON.stringify(this.mediaTypeList)));
modules：store的子模块，内容就相当于是store的一个实例。调用方式和前面介绍的相似，只是要加上当前子模块名，如：this.store.a.getters.XXX();
二、Vuex
2.1 vuex安装
cnpm install vuex --save
显示使用vuex插件，一般写在src/main.js中，或者写在其他js中，然后再在main.js中引入
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
2.2 定义一个全局实例对象(Vuex.Store)
该对象的状态（state）就是全局属性，类似于组件的data，每个组件都可以访问和修改属性。
可变的(mutations)类似于组建中的methods，mutations中的每个方法称作为mutation handler，用来修改state中的值，方法的参数可以用两个（state，payload）state标识全局单例对象，payload（载荷）也就是参数，调用时可以传递参数，该参数是可选的。
使用mutations的规则是：需要在我的store中初始化好所有所需的属性。
将store作为vue的选项，这样vue会将store“注入”到每一个子组件中，也就是说每个组件都可以通过this.$store来访问全局单例对象的store。
代码如下：
editHeaderImg(sendData).then(res => {
if(res.success) {
this.$message.success(res.msg);
this.headerImg = this.$formatURL(this.headerImgForm);
this.fileList = [];
this.$store.commit('SET_AVATAR', this.headerImg);
}
});
调用store中的mutations方法只能通过提交的方式this.$store.commit('方法名',负载参数)这种形式来调用，而不能使用this.$store.方法名，这种方式直接调用。除了这种方式，vuex还提供了一种将mutations映射（map）为methods的方式，然后再使用时直接调用method就会直接调用methos会帮我自动commit。
mapGetters() 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性，mapGetters() 函数接收一个参数，参数类型可以是对象类型也可以是数组类型
2.3 actions
Action类似于mutation， Action用于分发（dispatch）mutation，而不直接修改状态。Action可以包含任意异步操作(如发送http请求)，action方法接收两个参数（context， payload），context为Context对象，context对象store实例具有相同方法和属性，所以context可以解构成var {state, dispatch, commit, getters} = context
例如：
@store/modules/dic.js
const dic = {
state: {
industryTree: [],
mediaTypeTree: []
},
mutations: {
SET_INDUSTRY: (state, lsit) => {
state.industryTree = lsit;
},
SET_MEDIATYPE: (state, lsit) => {
state.mediaTypeTree = lsit;
}
},
actions: {
SetIndustry: ({ commit }, list) => {
commit('SET_INDUSTRY', list);
},
SetMediaType: ({ commit }, list) => {
commit('SET_MEDIATYPE', list);
}
}
};
export default dic;
@components/otherDialog/selBusiness.vue
// 行业数据
getBusiness() {
const industryTree = this.$store.getters.industryTree;
if(industryTree.length == 0) {
getBusinessTree().then(res => {
this.businessTypeList = res.data;
this.$store.dispatch("SetIndustry", res.data);
});
}else {
this.businessTypeList = industryTree;
}
},