vuex

Posted 2021-03-02 xjy20170907

核心概念：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