一、目的：讓代碼更好維護(hù)，讓多種數(shù)據(jù)分類更加明確
二、修改 store.js

const person = {namespaced: true; // 開(kāi)啟命名空間state: {},getters: {},actions: {},mutations: {} }const count = {namespaced: true; // 開(kāi)啟命名空間state: {},getters: {},actions: {},mutations: {} }const store = new Vuex.Store({mudules: {person,count} })

三、開(kāi)啟命名空間后，組件中讀取 state 數(shù)據(jù)

// 方式一：直接讀取 this.$store.state.module1.xxx // 方式二：借助 mapState 讀取 ...mapState('person', ['xxx', 'xxx', 'xxx']); // 指明哪個(gè)數(shù)據(jù)來(lái)自哪個(gè)模塊

四、開(kāi)啟命名空間后，組件中讀取 getters 數(shù)據(jù)

// 方式一：直接讀取 this.$store.state.getters['person/xxx'] // 方式二：借助 mapGetters 讀取 ...mapGetters('person', ['xxx']);

五、開(kāi)啟命名空間后，組件中調(diào)用 dispatch

// 方式一：直接調(diào)用 this.$store.dispatch('person/xxx', data) // 方式二：借助 mapActions 讀取 ...mapActions('person', {key: 'value'});

六、開(kāi)啟命名空間后，組件中調(diào)用 commit

// 方式一：直接調(diào)用 this.$store.commit('person/xxx', data) // 方式二：借助 mapMutations 讀取 ...mapMutations('person', {key: 'value'});

總結(jié)

以上是生活随笔為你收集整理的vuex 的模块化+命名空间的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。