Vuex的状态管理指的是什么？

1.State
    State提供唯一的公共数据源，所有共享的数据都要统一放到Store的State中进行存储
    const store = new Vuex.Store({
        state:{count:0}
    })
    组件访问State中数据的第一种方式：
        this.$store.state.全局数据名称
    组件访问State中数据的第二种方式：
        // 1.从vuex中按需导入mapState函数
        import {mapState} from 'vuex'
        通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性
       // 2.将全局数据，映射为当前组件的计算属性
       computed:{
           ...mapState({'count'})
       }

2.Mutation
    Mutation用于变更Store中的数据
    2.1 只能通过mutation变更Store数据，不可以直接操作Store中的数据
    2.2 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化
    // 定义Mutation
    const Store = new Vuex.Store({
        state:{
            count:0
        },
        mutations:{
            add(state){
                // 变更状态
                state.count++
            }
        }
    })
    // 在组件中  触发mutation
    methods:{
        handle1(){
            //触发 mutations 的第一种方式
            this.$store.commit('add')
        }
    }
    
    2.3 触发mutations时传递参数
    // 定义Mutations
    const store = new Vuex.Store({
        state:{
            count:0
        },
        mutations:{
            addN(state,step){
                // 变更状态
                state.count += step
            }
        }
    })
    //组件中 触发mutation
     methods:{
        handle2(){
            // 在调用commit函数
            //触发 mutations 时携带参数
            this.$store.commit('addN',3)
        }
    }
    2.4 this.$store.commit()是触发mutations的第二种方式
    // 1.从vuex中按需导入mapMutations函数
    import {mapMutations} from 'Vuex'
    // 2. 通过刚才导入的mapMutations函数，将需要的mutations函数，映射为当前组件的methods方法
        methods:{
            ...mapMutations(['add','addN'])
        }
        //不能在mutations里执行异步操作

3.Action
    3.1 Action用于处理异步任务，如果通过异步操作变更数据，必须通过Action，而不能使用Mutation，
        但是在Action中还是要通过触发Mutation的方式间接变更数据
    // 定义Action
    const store = new Vuex.Store({
        //....省略其他代码
        mutations:{
            add(state){
                state.count++
            }
        },
        actions:{
            addAsync(context){
                setTimeOut(()=>{
                    context.commit('add')
                },1000)
            }
        }
    })
    //组件中 触发Action
    methods:{
        handle(){
            //触发actions的第一种方式
            this.$store.dispatch('addAsync')
        }
    }
    3.2 触发actions异步任务时携带参数：
    // 定义Action
    const store = new Vuex.Store({
        //....省略其他代码
        mutations:{
            addN(state,step){
                state.count += step
            }
        },
        actions:{
            addNAsync(context,step){
                setTimeOut(()=>{
                    context.commit('addN',step)
                },1000)
            }
        }
    })
    //组件中 触发Action
    methods:{
        handle(){
            //触发actions时携带参数
            this.$store.dispatch('addNAsync',5)
        }
    }
    3.3 this.$store.dispatch()是触发actions的第一种方式，触发actions的第二种方式：
     // 1.从vuex中按需导入mapActions函数
        import {mapActions} from 'vuex'
        通过刚才导入的mapActions函数，将当前组件需要的action函数，映射为当前组件的methods方法
       // 2.将全局数据，映射为当前组件的计算属性
       methods:{
           ...mapActions(['addAsync','addNAsync'])
       }

  4.Getter
    4.1 Getter用于对Store中的数据进行加工处理形成新的数据
        Getter可以对Store中已有的数据加工处理之后形成新的数据，类似vue的计算属性
        Store中数据发生变化，Getter的数据也会跟着变化
    // 定义Getter
    const store = new Vuex.Store({
        state:{
            count:0
        },
        getters:{
           showNum:state=>{
               return '当前最新的数量是【'+state.count+'】'
           }
        }
    })
    4.2 使用getters的第一种方式：this.$store.getters.名称
    4.3 使用getters的第二种方式：
        import {mapGetters} from 'vuex'
        computed:{
            ...mapGetters(['showNum'])
        }