聊聊vuex如何模块化编码＋命名空间-9543建站博客

广告：宝塔Linux面板高效运维的服务器管理软件点击【 https://www.bt.cn/p/uNLv1L 】立即购买

聊聊vuex如何模块化编码＋命名空间

Vuex如何模块化编码＋命名空间？下面本篇文章就来简单了解一下，希望对大家有所帮助！

模块化编码＋命名空间

小a：“为啥要开启这个捏？”山鱼：“当然是让代码更好维护，让多种数据分类更加明确。”

小a：“那如何才能做到模块化编码＋命名空间呢”

山鱼：“只需要这样即可”

namespaced: true

登录后复制

将Count组件和Person组件里面的东西全部放到store里面

// Count的相关配置export default {    namespaced: true,    actions: {        // 奇数加法        jiaodd(context, value) {            if (context.state.sum % 2) {                context.commit('JIA', value)            }        },        // 延迟加        jiaWait(context, value) {            setTimeout(() => {                context.commit("JIA", value)            }, 500);        },    },    mutations: {        JIA(state, value) {            state.sum += value        },        JIAN(state, value) {            state.sum -= value        },    },    state: {        sum: 0, // 当前和        school: '山鱼小学',        subject: '前端',    },    getters: {        bigSum(state) {            return state.sum * 10        }    }}

登录后复制

2.开启命名空间后读取state的数据

  computed: {     // 自己读取    personList() {      returnthis.$store.state.personAbout.personList;    },    sum() {      returnthis.$store.state.countAbout.sum;    },  },  // 借助mapState读取computed: {    ...mapState("countAbout", ["sum", "subject", "school"]),     ...mapState("personAbout", ["personList"])   },

登录后复制

3.开启命名空间后，组件中读取getters数据

  computed: {      // 自己读取    firstName() {      returnthis.$store.getters["personAbout/firstPersonName"];    }  },  methods: {    // 借助mapGetters读取    // 借助mapMutations生成对应的方法，方法种会调用相应的commit去联系mutations    ...mapMutations('countAbout',{ increment: "JIA", decrement: "JIAN" }), // 对象式    ...mapActions('countAbout',{ incrementOdd: "jiaodd", incrementWait: "jiaWait" }) //对象式  },

登录后复制

4.开启命名空间后，组件中调用dispatch

methods: {     // 直接dispath    addWang() {      constpersonObj= { id: nanoid(), name: this.name };      this.$store.dispatch("personAbout/addNameWang", personObj);      this.name="";    },  },//借助mapGetters读取:  computed: {    ...mapGetters('countAbout',['bigSum'])  },

登录后复制

5.开启命名空间后，组件中调用commit

methods: {    // 直接调用    add() {      constpersonObj= { id: nanoid(), name: this.name };      this.$store.commit("personAbout/ADD_PERSON", personObj);      this.name="";    }, }  methods: {    // 借助mapMutations生成对应的方法，方法种会调用相应的commit去联系mutations    ...mapMutations('countAbout',{ increment: "JIA", decrement: "JIAN" }), // 对象式      },  }

登录后复制