Vuex
四大核心模块：
- state: 翻译：状态，state其实是数据状态管理对象，在这里你可以初始化一些你想要的数据。
- getter: 翻译： 获得者，getter是对state的数据对象的读取，getters从表面是获得的意思，可以把他看作在获取数据之前进行的一种再编辑,相当于对数据的一个过滤和加工。getters就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算
- Actions：翻译：行动，Actions里面我们可以定义我们想执行异步的方法，在这里它并不会立即去执行，而是在页面中去dispatch这个方法，提交mutations，而不是直接去改变状态，在页面中有两种方式去做派发，第一种 this.$store.dispatch('xxx') 第二种 可以使用mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（Demo中有体现）
- mutations：翻译： 突变，mutations里面可写很多的改变状态的方法，也就是像翻译一样，可以改变state里面的数据，试讲state的里面数据发生改变的唯一方式。
实战例子：
1.searchValueStore.js
export default {
state: {
searchValue:{},//查询条件数据
listPageNum:1
},
getters:{},
mutations:{
setSearchValue(state,options){
state.searchValue = JSON.parse(JSON.stringify(options));
},
setListPageNum (state, option) {
state.listPageNum = option;
}
},
actions: {},
moudles: {}
}
2.inidex.js
import Vue from 'vue';
import Vuex from 'vuex';
import actions from './actions.js';
import mutations from './mutations.js';
import searchValueStore from './module/searchValueStore';//备授课记录查询条件
Vue.use(Vuex);
// 这里为全局的，模块内的请在模块内动态注册
const store = new Vuex.Store({
strict: true,
state: {
dataJump:false,
currentTheme:'',//当前主题
curSystemMenu: null,//菜单
userInfo: {//用户信息
userId: "",//ID
},
userInfoUserId:''
},
getters: {
},
mutations,
actions,
modules:{
searchValueStore
}
});
export default store;
3.组件内使用
computed :{
...mapState({
searchValue: state => state.searchValueStore.searchValue,
listPageNum: state => state.searchValueStore.listPageNum
}),
}
