Use of vuex namespace

Since Vuex uses a single state tree, all application states are concentrated into a relatively large object. When your application becomes very complex, the store object may become quite bloated.

Therefore, Vuex allows us to split the store into modules, each of which has its own state, mutation, action, getter, and even nested submodules.

By default, actions, mutations, and getters inside a module are registered in the global namespace, allowing multiple modules to respond to the same mutation or action. If you want your module to have higher encapsulation and reusability, the concept of namespace is used.

{
    "Module 1":{
        state:{},
        getters:{},
        mutations:{},
        actions:{}
    },
    "Module 2":{
        state:{},
        getters:{},
        mutations:{},
        actions:{}
    }
}

The first parameter of mapState, mapGetters, mapMutations, and mapActions is a string (namespace name), and the second parameter is an array (no need to rename)/object (need to rename).

mapXXXs('namespace name',['attribute name 1','attribute name 2'])

mapXXXs('namespace name',{

  'New name 1 in component': 'Original name 1 in Vuex',

  'New name 2 in component': 'Original name 2 in Vuex',

})

Project Structure

mian.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store/index";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

index.js

import Vue from "vue";
import Vuex from "vuex";
import cat from "./modules/cat";
import dog from "./modules/dog";

Vue.use(Vuex);

export default new Vuex.Store({
  modules: { cat, dog }
});

cat.js

export default {
  namespaced: true,
  // local state: {
    name: "Blue and White British Shorthair",
    age: 1
  },
  // Local read getters: {
    desc: state => "Pet: " + state.name
  },
  // Local changes mutations: {
    increment(state, payload) {
      state.age += payload.num;
    }
  },
  // Local actions actions: {
    grow(context, payload) {
      setTimeout(() => {
        context.commit("increment", payload);
      }, 1000);
    }
  }
};

dog.js

export default {
  namespaced: true,
  // local state: {
    name: "Labrador",
    age: 1
  },
  // Local read getters: {
    desc: state => "Pet: " + state.name
  },
  // Local changes mutations: {
    increment(state, payload) {
      state.age += payload.num;
    }
  },
  // Local actions actions: {
    grow(context, payload) {
      setTimeout(() => {
        context.commit("increment", payload);
      }, 1000);
    }
  }
};

hello.vue

<template>
  <div class="hello">
    <h3>Vuex state tree</h3>
    <div>{{this.$store.state}}</div>
    <h3>mapState</h3>
    <div>{{catName}} {{catAge}}</div>
    <div>{{dogName}} {{dogAge}}</div>
    <h3>mapGetters</h3>
    <div>{{catDesc}}</div>
    <div>{{dogDesc}}</div>
    <h3>mapMutations</h3>
    <button @click="catIncrement({num:1})">Cat changes</button>
    <button @click="dogIncrement({num:1})">Dog changes</button>
    <h3>mapActions</h3>
    <button @click="catGrow({num:1})">Cat Action</button>
    <button @click="dogGrow({num:1})">Dog action</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

export default {
  name: "HelloWorld",
  computed: {
    ...mapState("cat", {
      catName: "name",
      catAge: "age"
    }),
    ...mapState("dog", {
      dogName: "name",
      dogAge: "age"
    }),
    ...mapGetters("cat", {
      catDesc: "desc"
    }),
    ...mapGetters("dog", {
      dogDesc: "desc"
    })
  },
  methods: {
    ...mapMutations("cat", { catIncrement: "increment" }),
    ...mapMutations("dog", { dogIncrement: "increment" }),
    ...mapActions("cat", { catGrow: "grow" }),
    ...mapActions("dog", { dogGrow: "grow" })
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>

Operation effect

This is the end of this article about the use of vuex namespace. For more relevant vuex namespace content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in: