重温前端之vuex笔记

state

正常使用

// 定义
state:{
    count:10
}
// 调用
computed:{
    count(){
        return this.$store.state.count
    }
}

调用语法糖-mapState

computed:{
    ...mapState(['count','other'])
}

getters

正常使用

// 定义
getters:{
    countPlus(state){
        return state.count*2;
    }
}
// 调用
computed:{
    countPlus(){
        return this.$store.getters.countPlus;
    }
}

使用语法糖-mapGetters

computed:{
    ...mapGetters(['getter1','getter2'])
}

mutation

正常使用

// 定义
mutations:{
    add(state){
        state.count++;
    },
    set(state, arg){
        state.count = arg.count;
    }
}
// 调用
this.$store.commit('add')
this.$store.commit('set',{
    count:100
})

使用语法糖-mapMutations

methods:{
    ...mapMutations(["add","set"])
}

action

正常使用

// 定义
state:{
    product:'car'
}
mutations:{
    changeProduct(state,payload){
        state.product = payload.change
    }
}
actions: {
    changeProduct(context,payload){
        setTimeout(()=>{
            context.commit('changeProduct',{change:temp})
        },100)
    }
}
// 调用
methods:{
    selectProduct(){
        this.$store.dispatch('changeProduct',{
            extraInfo:"go"
        })
    }
}

使用语法糖-mapAction

methods:{
    ...mapActions(["increment","incrementBy"])
}

module

正常使用

// 定义
const moduleA = {
    state:{
        name:"ma"
    },
    mutations:{},
    getters:{},
    actions:{}
}
const moduleB = {
    state:{
        name:"mb"
    },
    mutations:{},
    getters:{},
    actions:{}
}
export default new Vuex.Store({
    modules:{
        moduleA,
        moduleB
    },
    state:{}
    mutations:{},
    getters:{},
    actions:{}
})
// 调用
console.log(this.$store.state.moduleA.name) //ma