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
以上是聊聊vuex如何模組化編碼＋命名空間的詳細內容。更多資訊請關注PHP中文網其他相關文章！
