vuex基础

59 阅读1分钟
           methods: {
        ...Vuex.mapMutations(['add', 'setNickname']),//简化代码

          //相当于
           // add() {
            //     this.val += 2
            //     // this.$store.commit('addAge', this.val)
            // },
            // setNickname() {
            //     this.val += 2
            //     // this.$store.commit('addAge', this.val)
            // }
        },
         computed: {
            //映射 辅助函数
            ...Vuex.mapState(['age', 'nickname']),
            //相当于
            // age() {
            //     return this.$store.state.age
            // },
            // nickname() {
            //     return this.$store.state.nickname
            // },
        },
          const store = new Vuex.Store({
        state: {
            age: 10 //希望共有的放这,所有组件都可以用到
        },
        //computed计算属性
        getters: {
            fuill(state) {} //state自带,不用传
        },
        //methods方法 里面的方法在组件里必须通过this.$store.commit('set',传的值)来调用
        mutations: {
            set(state, data) {} //state自带,不用传
        },
        //async methods 
        actions: {}, //异步操作
        //模块 分割代码 和路由有点像
        modules: {
            a: {
                state: {},
                getters: {}
            },
            b: {
                state: {},
                getters: {}
            }
        }
    })