vuex的概念与使用

vuex是实现组件全局状态(数据)管理的一种机制，方便组件之间进行数据共享

大范围频繁的共享数据的时候 ，就用vuex的store去

vuex的使用步骤：
    1.安装vuex    npm i vuex --save
    2.导入vuex包  import vuex from 'vuex'
                 Vue.use(vuex)
    3.创建store对象  (创建 store.js 文件)
        import Vue from 'vue'
        import Vuex from 'vuex'
        Vue.use(Vuex)

        const store =new Vuex.Store({
            //全局共享数据(只读，不能直接做修改)
            state:{count:0,name:'zhaoqin'},
            //注意事项：修改state，作用：集中监控数据变化
            mutations:{
                add(state){
                    //变更
                    state.count++;
                },
                addN(state,step){
                    //传值变更
                    state.count+=step;
                }
            },
            //异步任务集合
            actions:{
                addNasync(context,step){
                    setTimeout(()=>{
                        //调用mutation里面的函数
                        context.commit('addN',step)
                    },1000)

                }
            },
            //计算属性（state 改变之后，这里会计算）
            getters:{
                showNum(state){
                    return '3030303'+state.count
                }

            }

        })
        export default store;
    4.将store对象挂载到vue实例中(main.js文件)
    import store from './store'
    new Vue({
        el:'#app',
        render:h=>h(app),
        //将创建的共享实例对象挂载到vue实例中
        store
    })

    5.访问全局数据值、方法（vuex的使用）
    第一种方式：
    //调用state
    this.$store.state.count
    //调用mutation中的方法
    this.$store.commit('add')
    this.$store.commit('addN',3)//这种是可以传递参数的
    this.$store.dispatch('addNasync');
    this.$store.dispatch('addNasync',3);//触发action

    this.$store.getters.showCount;
    第二种方式：
            1.从vuex中按需导入mapState(在组件里面)
            import { mapState  } from 'vuex'
            import { mapActions } from "vuex"
            import { mapMutations } from "vuex"
            import { mapGeeters } from "vuex"
            2.将全局数据，映射为当前组件的计算属性
            computed:{
                ...mapGeeters{['showNum']}
                ...mapState{ ['count','sex'] }
            }
            3.mutations、actions这种函数属性，导入组件，然后在methods里面解构使用
            methods:{
                ...mapActions{['add','sub']},
                ...mapMutations{['add','addN']}
            }