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

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

三、開啟命名空間后，組件中讀取 state 數據

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

四、開啟命名空間后，組件中讀取 getters 數據

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

五、開啟命名空間后，組件中調用 dispatch

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

六、開啟命名空間后，組件中調用 commit

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。