vuex笔记

store 实例会注入到根组件下的所有子组件中，子组件通过 this.$store 访问

computed:{
   count(){
      // store 实例会注入到根组件下的所有子组件中，子组件通过 this.$store 访问
      return this.$store.state.count
   }
}

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，可以使用 mapState 辅助函数帮助生成计算属性

    computed:{
       ...mapState({
           //'count' 等同于 `state => state.count`  
           count:'count',
           countAlias:state=>state.count ,
           // 为使用 `this` 获取当前组件状态，使用常规函数
           countLocalState(state){
             return state.count+this.localCount   
           }
       })
    },
    data() {
        return {
            localCount:9
        }
    }

Getter 从 store 中的 state 中派生出一些状态，相当于store的计算属性，可以不用在每个子组件里重新计算属性，直接在store里设置计算属性

//通过属性访问

//store.js	
export default new Vuex.Store({
    state: {
        count: 0,
        arr: [1, 2, 3, 4, 5]
    },
    mutations: {
        increment(state) {
            state.count++
        }
    },
    getters: {
        //Getter 接受 state 作为其第一个参数
        oddNumInArr: state => {
            return state.arr.filter(num => (num % 2 == 0))
        }
    }
});

//子组件
computed:{
   ...mapState({
       storeComputedAttr(state){
         //Getter 会暴露为 store.getters 对象，可以以属性的形式访问这些值  
         return this.$store.getters.oddNumInArr     
       }
   })
}

//getter返回一个方法时，即通过方法访问时

getters: {
    //getter 返回一个函数,getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果
    getOddOrEvenNumInArr: (state) => (flag) => {
        return state.arr.filter(num => {
            return flag ? num % 2 == 0 : num % 2 != 0
        })
    }
}

computed:{
   ...mapState({
       oddNumInStoreComputed(state){
         return this.$store.getters.getOddOrEvenNumInArr(true);
       },
       evenNumInStoreComputed(state){
         return this.$store.getters.getOddOrEvenNumInArr(false);
       }
   })
}

mapGetters 辅助函数，类似于mapState，将 store 中的 getter 映射到当前子组件的计算属性

import {mapState,mapGetters} from 'vuex';

computed:{
   ...mapGetters({
      oddNumInArr:"oddNumInArr"
   })
}

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

mutations: {
    //子组件不能直接调用这个方法 
    pushNumInArr(state, otherArg) {
        state.arr.push(otherArg.newNum)
    }
}

methods:{
    //提交载荷（Payload）方式 
    addNum(){
        this.$store.commit("pushNumInArr",{newNum:Math.random()});
    },
    //对象风格的提交方式
    addOtherNum(){
        this.$store.commit({
            type:"pushNumInArr",
            newNum:Math.random()
        })
    }
}

mapMutations是将组件中的methods映射为commit调用

...mapMutations({
    ps(){
        this.$store.commit({
          type:"pushNumInArr",
          newNum:Math.random()
       })
    }
})  

Action
Action 提交的是 mutation，而不是直接变更状态
Action 可以包含任意异步操作
Action 通过 store.dispatch 方法触发

actions: {
    //接受一个与 store 实例具有相同方法和属性的 context 对象,如context.commit context.state context.getters context.mutations ...
    //因此可以解构为{commit,state,getters,mutations}
    pushNumInArr(context, otherArg) {
        context.commit("pushNumInArr", otherArg)
    },
    pushNumInArrASync({ commit }, otherArg) {
        setTimeout(function() {
            commit("pushNumInArr", otherArg);
        }, 1500)
    }
}

methods:{
    ...mapActions({
        triggerAction(){
            this.$store.dispatch(
                {
                    type:"pushNumInArrASync",
                    newNum:77
                }
            )
        }
    })
}

//在一个action里调用另一个action

actions: {
    pushNumInArrASync({ commit }, otherArg) {
        return new Promise(function(resolve, reject) {
            setTimeout(function() {
                commit("pushNumInArr", otherArg);
                resolve();
            }, 1500)
        })
    },
    shiftNumInArrAsync({ dispatch, commit }, otherArg) {
        return dispatch("pushNumInArrASync", otherArg).then(function() {
            commit("shiftNumInArr")
        })
    }
}

总结：

---

• state 全局的状态
• getter 相当于store中的计算属性
• mutation 同步修改state的事件方法
• action 可以dispatch异步commit mutation从而修改state
• module 模块化store
• mapState 将store中的属性映射到当前组件的计算属性，主要是可以映
  射多个，如果是单个属性可以在计算属性里直接通过this.$store.state访问
• mapGetters 将store中的计算属性映射到当前组件的计算属性
• mapMutations 将store中的方法映射到当前组件的methods里
• mapActions 同上

8/3/2018 4:10:00 PM