标签：calendar tin maps 设置 name 面向 pac 对象 方法
核心概念：State、Getter、Mutation、Action、Module
使用
新建store.js，引入vue和vuex，执行 Vue.use(Vuex) 来全局安装 Vuex.。Vuex.Store 即 Vuex 的构造函数，来初始化 Vuex 实例：
在根实例中注册store：
state
在state中定义属性name，给一个初始值 “张三”。在store实例中注册state，在组件中使用$store.state.name使用定义的属性name，页面显示 ‘store中的姓名：张三’：
这里我们使用的是this.$store.state来访问vuex中定义的变量，还有一种辅助函数mapState的方式。
mutation
mutation是更改store中状态的唯一方法，之所以说唯一，是因为vuex中规定只能通过提交mutation的方式去更改store中的状态，包括action中的操作，也是通过提交mutation去修改。vuex中规定原则上mutation中不能包含异步操作。mutation下事件的调用是通过 this.$store.commit 传入对应的type触发的：
action
action用this.$store.dispatch方法触发，触发的是异步的操作，其他的和mutation一样：
getter
getter类似计算属性，它的返回值会根据它的依赖被缓存起来，且依赖对象发生改变的时候它才会被重新计算。
getter的是对store中某个属性相同的处理操作抽出出来，做了一个公共的处理。
getter的使用方法 $.store.getters.属性名。
例如，使用store中name的时候，需要做一个判断：如果是张三，返回“张三最棒”，其它的原样返回。用computed可以这样做：
用getter实现：
module
module是对store的一个分割，将store分割成一个个小的模块，每个模块中又具有store完整的功能。他的使用主要面向一些状态非常多的大型应用。
const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) store.state.a // -> moduleA 的状态 store.state.b // -> moduleB 的状态
module可以和其他同时使用
vuex的辅助函数：mapState、mapMutations、mapGetters、mapActions
首先在组件里引入它们：
import { mapActions, mapMutations, mapGetters, mapState } from ‘vuex‘;
mapState
在computed中引入，depDate为indexModule里的state：
computed: { ...mapState({ depDate: state => state.indexModule.DepDate, }) },
在页面中可以直接使用depDate：
<list-calendar :depDate="depDate"></list-calendar>
mapMutations
在methods中引入：
methods: { ...mapMutations([ ‘pushFlight‘ ]) }
在页面中直接使用这个方法：
this.pushFlight({ flightInfo: json.flights, queryCHDINFModule: queryCHDINFModule });
mutations里配置：
mutations: { pushFlight(state, obj) { let { flightInfo } = obj; let flightArr = flightInfo; handleFlightList(state, {stateKey: ‘list‘, flightArr}); },
mapGetter
在computed中引入：
computed: { ...mapGetters([ ‘getFlightList‘, ‘getMismatchList‘ ]), }
页面中直接使用：
this.getFlightList.length； <flight-list :list="getMismatchList"></flight-list>
getter里的设置：
getters: { getFlightList: state => { return state.list; }, getMismatchList: state => { return state.mismatchList; }, }
mapActions
在methods中引入：
methods: { ...mapActions([ ‘toggleToast‘, ‘setCityCode‘, ‘getTrainInfo‘ ]), }
页面中直接使用：
this.setCityCode({ name: query.depCity, type: ‘depart‘ });
action中的设置：
setCityCode: ({ commit }, cityObj) => {
var code = ‘‘;
gncitys.forEach(function(val) {
if (val.slice(0, 9).indexOf(cityObj.name) > -1) {
code = val[0];
}
});
commit(‘changeCity‘, {
item: { item: cityObj.name, code: code },
id: cityObj.type
});
}
原文：https://www.cnblogs.com/xihao/p/11420884.html
标签：calendar tin maps 设置 name 面向 pac 对象 方法
原文地址：https://www.cnblogs.com/xjy20170907/p/12659873.html
