vuex namespaced命名空间搭配辅助函数使用笔记

前言

最近维护项目的时候发现对 vuex 中 namespaced 的使用以及 mapState、mapGetters 等辅助函数的使用方法掌握的不够牢固，特此记录使用辅助函数和不使用辅助函数、非命名空间和命名空间使用 vuex 时的区别

非命名空间

state

正常使用

this.$store.state.userName
this.$store.state.age

使用mapState

computed: {
    // this.userName ==> this.$store.state.userName
    ...mapState(["userName", "age"])
}

getters

getters: {
    getUserName(state) {
        return "我是" + state.userName;
    }
}

正常使用

this.$store.getters.getUserName

使用mapGetters

computed: {
    // this.getUserName ==> this.$store.getters.getUserName
    ...mapGetters(["getUserName"])
}

mutations

mutations: {
  CHANGE_NAME (state, payload) {
    state.userName = payload;
  }
}

正常使用

methods: {
    change() {
        this.$store.commit("CHANGE_NAME", "痞狮");
    }
}

使用mapMutations

methods: {
    ...mapMutations(["CHANGE_NAME"]),
    // 或
    ...mapMutations({
        // this.CN("痞狮")
        CN: "CHANGE_NAME",
    }),
    
    change() {
        this.CHANGE_NAME("痞狮");
    }
}

actions

actions: {
    changeName(context, newName) {
        setTimeout(() => {
            context.commit("CHANGE_NAME", newName);
        }, 1000);
    }
}

正常使用

methods: {
    change() {
        this.$store.dispatch("changeName", "痞狮async");
    }
}

使用mapActions

methods: {
    ...使用mapActions(["changeName"]),
    // 或
    ...使用mapActions({
        // this.CNA("痞狮async")
        CNA: "changeName",
    }),
    
    change() {
        this.changeName("痞狮async");
    }
}

命名空间

在使用modules时加上 namespaced: true，当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

这里的体现在：可以通过 this.$store.state.mobile.name 访问模块的state，但是不能通过 this.$store.getters.mobile.getColor 访问模块的getters

store/mobile/index.js

const mobile = {
    namespaced: true,
    state: {},
    getters: {},
    mutations: {},
    actions: {}
}  
export default mobile;

store/index.js

import mobile from "./mobile/index";

const store = new Vuex.Store({
    state,
    getters,
    mutations,
    actions,
    modules: {
        mobile
    }
});

export default store;

state

正常使用

this.$store.state.mobile.name
this.$store.state.mobile.color

使用mapState

computed: {
    // ...mapState(["userName"]),
    ...mapState({
        // this.userName ==> this.$store.state.userName
        userName: "userName",
        // this.mobileNamef ==> this.$store.state.mobile.name
        mobileNamef(state) {
            return state.mobile.name;
        },
        // 上面的简写
        mobileName: (state) => state.mobile.name,
    }),
},

getters

正常使用

this.$store.getters["mobile/getColor"]

使用mapGetters

computed: {
    // this['mobile/getColor'] ==> this.$store.getters["mobile/getColor"]
    ...mapGetters(["getUserName", "mobile/getColor"]),
    ...mapGetters({
        // this.getUserName ==> this.$store.getters.getUserName
        getUserName: "getUserName",
        // this.getMobileColor ==> this.$store.getters["mobile/getColor"]
        getMobileColor: "mobile/getColor",
    }),
    // 还可以将模块提取作为第一个参数
    // this.getColor ==> this.$store.getters["mobile/getColor"]
    ...mapGetters("mobile", ["getColor"]),
}

mutations

正常使用

methods: {
    change2() {
        this.$store.commit("mobile/CHANGE_COLOR", "黑");
    }
}

使用mapMutations

methods: {
    ...mapMutations(["CHANGE_NAME", "mobile/CHANGE_COLOR"]),
    // 或
    ...mapMutations({
        // this.CC("黑")
        CC: "mobile/CHANGE_COLOR",
    }),

    change2() {
        this["mobile/CHANGE_COLOR"]("黑");
    }
}

actions

正常使用

methods: {
    changeAsync2() {
        this.$store.dispatch("mobile/changeColor", "白");
    }
}

使用mapActions

methods: {
    ...mapActions(["changeName", "mobile/changeColor"]),
    // 或
    ...mapActions({
        // this.CCA("白")
        CCA: "mobile/changeColor",
    }),

    changeAsync2() {
        this["mobile/changeColor"]("白");
    }
}

总结

以上就是本笔记内容~