Vuex（个人理解）

Vuex（个人理解）

• state:初始化数据—全局状态
• mutations：同步，更改state的数据
• actions：异步，提交mutation来更改数据
• getters：对state进行二次处理，比如筛选、过滤等。类似于计算属性
• modules：模块化，将store分成多个模块

//store.js 定义vuex


import Vue from 'vue';
import Vuex from 'vuex'
Vue.use(Vuex)

//payload:支持对象、数字、字符串
 export default new Vuex.Store({
     state:{
        count:1,
        todoList:[{id:1,done:true},{id:2,done:false}]
    },
    mutations:{
        increment:(state,payload)=>{
            state.count += payload.num;
        },
        decrement:(state,payload)=>{
            state.count -= payload.num;
        }
    },
    actions:{
        //第一种定时任务
        incrementAsync:(context,payload)=>{
            settimeout(()=>{
                context.commit('increment',payload.num);
            },1000);
        },
        //第二种Promise对象
        incrementPromise:(context,payload)=>{
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    context.commit('increment',payload.num);
                    resolve();
                }, 1000);
            })
        },
        //第三种action互调
        actionsA:(context,payload)=>{
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    context.commit('increment',payload.num);
                    resolve();
                }, 1000)
            })
        },
        actionB:(context,payload)=>{
            return context.dispatch('actionA',payload.num).then(()=>{
                //提交其他mutation
                context.commit('decrement',payload.num);
            });
        }
    },
    getters:{
        //属性方式
        todoDoneList:(state)=>{
            //即返回的是todolist里的done：true的数据
            return state.todolist.filter(todo=>todo.done);
        },
        //方法方式
        todoDoneListById:(state)=>(id)=>{
            //即返回的是todolist里的done：true的数据
            return state.todolist.find(todo => todo.id === id);
        },
    }
 })

//index.vue 引用vuex

import {mapState,mapMutations,mapActions,mapGetters} from 'vuex';

export default{
    data(){
        return{
            localCount:2
        }
    },
    computed:{
        //mapState的使用方式
            //第一种调用方式
                count(){
                    return this.$store.state.count;
                },
            //第二种调用方式
                ...mapState(['todoList']),
            //第三种调用方式
                ...mapState({
                    //1. 箭头函数可使代码更简练
                    count: state => state.count,
                    //2. 传字符串参数 'count' 等同于this.countAlis = `state => state.count`
                    countAlias: 'count',
                    //3. 为了能够使用 `this` 获取局部状态，必须使用常规函数
                    countPlusLocalState (state) {
                      return state.count + this.localCount;
                    }
            }),
        //mapGetters的使用方式
            //属性方式
                //第一种调用方式
                    todoDoneList(){
                        return this.$store.state.getters.todoDoneList;//{id:1,done:true}
                    },
                //第二种调用方式
                    ...mapGetters(['todoDoneList']);
            //方法方式
                    todoDoneListById(){
                        return this.$store.state.getters.todoDoneListById(2);//{id:2,done:false}
                    },
    },
    methods:{
        //mapMutations的使用方式  
            //第一种调用方式
                increment(){
                    //提交mutation来改变vuex中的count的值， 2 + 4。
                    this.$store.commit('increment',{num:4});
                },
                incrementAsync(){
                    //提交actions提交mutation来改变vuex中的count的值， 2 + 6。
                    this.$store.dispatch('incrementAsync',{num:6})
                },
        
            //第二种调用方式
            //将 `this.increment()` 映射为this.$store.commit('increment');
                ...mapMutations(['increment']);
        
            //第三种调用方式
            //取别名 `this.incrementAlias()` 映射为this.$store.commit('increment');
                ...mapMutations({
                    incrementAlias:'increment'
                })
        
        //mapActions的使用方式
            //第一种调用方式
            increment(){
                //调用action异步提交mutation来改变vuex中的count的值， 2 + 4。
                this.$store.dispatch('incrementAsync',{num:4});
            },
        
            //第二种调用方式
            increment(){
                this.$store.dispatch({type: 'incrementAsync',{num:4}});
            }
            //第三种调用方式
            increment(){
                this.$store.diapatch('incrementAsync').then(()=>{
                    //do something
                })
            }
    }
}