vuex命名空間的使用
Vuex由於使用單一狀態樹，應用的所有狀態會集中到一個比較大的對象。當應用變得非常復雜時，store 對象就有可能變得相當臃腫。
因此，Vuex 允許我們將 store 分割成模塊（module），每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊。
默認情況下，模塊內部的 action、mutation 和 getter 是註冊在全局命名空間的，這樣使得多個模塊能夠對同一 mutation 或 action 作出響應。如果希望你的模塊具有更高的封裝度和復用性，此時就用到瞭命名空間這個概念。
{
"模塊1":{
state:{},
getters:{},
mutations:{},
actions:{}
},
"模塊2":{
state:{},
getters:{},
mutations:{},
actions:{}
}
}
mapState、mapGetters、mapMutations、mapActions第一個參數是字符串（命名空間名稱），第二個參數是數組（不需要重命名）/對象（需要重命名）。
mapXXXs('命名空間名稱',['屬性名1','屬性名2'])
mapXXXs('命名空間名稱',{
'組件中的新名稱1':'Vuex中的原名稱1',
'組件中的新名稱2':'Vuex中的原名稱2',
})
項目結構
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,
// 局部狀態
state: {
name: "藍白英短",
age: 1
},
// 局部讀取
getters: {
desc: state => "寵物：" + state.name
},
// 局部變化
mutations: {
increment(state, payload) {
state.age += payload.num;
}
},
// 局部動作
actions: {
grow(context, payload) {
setTimeout(() => {
context.commit("increment", payload);
}, 1000);
}
}
};
dog.js
export default {
namespaced: true,
// 局部狀態
state: {
name: "拉佈拉多",
age: 1
},
// 局部讀取
getters: {
desc: state => "寵物：" + state.name
},
// 局部變化
mutations: {
increment(state, payload) {
state.age += payload.num;
}
},
// 局部動作
actions: {
grow(context, payload) {
setTimeout(() => {
context.commit("increment", payload);
}, 1000);
}
}
};
hello.vue
<template>
<div class="hello">
<h3>Vuex狀態樹</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})">貓動作</button>
<button @click="dogGrow({num:1})">狗動作</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>
運行效果
到此這篇關於vuex命名空間的使用的文章就介紹到這瞭,更多相關vuex命名空間內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！