快捷導(dǎo)航

vuex命名空間的使用

更新時(shí)間：2021年09月29日 09:21:17 作者：HappyCodingTop

本文主要介紹了vuex命名空間的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

默認(rèn)情況下，模塊內(nèi)部的 action、mutation 和 getter 是注冊(cè)在全局命名空間的，這樣使得多個(gè)模塊能夠?qū)ν?mutation 或 action 作出響應(yīng)。如果希望你的模塊具有更高的封裝度和復(fù)用性，此時(shí)就用到了命名空間這個(gè)概念。

{
    "模塊1":{
        state:{},
        getters:{},
        mutations:{},
        actions:{}
    },
    "模塊2":{
        state:{},
        getters:{},
        mutations:{},
        actions:{}
    }
}

mapState、mapGetters、mapMutations、mapActions第一個(gè)參數(shù)是字符串（命名空間名稱），第二個(gè)參數(shù)是數(shù)組（不需要重命名）/對(duì)象（需要重命名）。

mapXXXs('命名空間名稱',['屬性名1','屬性名2'])

mapXXXs('命名空間名稱',{

　　'組件中的新名稱1':'Vuex中的原名稱1',

　　'組件中的新名稱2':'Vuex中的原名稱2',

})

項(xiàng)目結(jié)構(gòu)

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,
  // 局部狀態(tài)
  state: {
    name: "藍(lán)白英短",
    age: 1
  },
  // 局部讀取
  getters: {
    desc: state => "寵物：" + state.name
  },
  // 局部變化
  mutations: {
    increment(state, payload) {
      state.age += payload.num;
    }
  },
  // 局部動(dòng)作
  actions: {
    grow(context, payload) {
      setTimeout(() => {
        context.commit("increment", payload);
      }, 1000);
    }
  }
};

dog.js

export default {
  namespaced: true,
  // 局部狀態(tài)
  state: {
    name: "拉布拉多",
    age: 1
  },
  // 局部讀取
  getters: {
    desc: state => "寵物：" + state.name
  },
  // 局部變化
  mutations: {
    increment(state, payload) {
      state.age += payload.num;
    }
  },
  // 局部動(dòng)作
  actions: {
    grow(context, payload) {
      setTimeout(() => {
        context.commit("increment", payload);
      }, 1000);
    }
  }
};

hello.vue

<template>
  <div class="hello">
    <h3>Vuex狀態(tài)樹(shù)</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})">貓變化</button>
    <button @click="dogIncrement({num:1})">狗變化</button>
    <h3>mapActions</h3>
    <button @click="catGrow({num:1})">貓動(dòng)作</button>
    <button @click="dogGrow({num:1})">狗動(dòng)作</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>

運(yùn)行效果