聊聊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" }), // 对象式
      },
  }

只能说模块化很香，代码更清晰数据更分明，后期维护也很niue

（学习视频分享：vuejs入门教程、编程基础视频）

以上就是聊聊vuex如何模块化编码＋命名空间的详细内容，更多请关注其它相关文章！