Vuex綜合使用

• 一、倉庫
• • 1.主倉庫
  • 2.子倉庫
• 二、使用
• • 1.全局（index.js和未開啟命名空間的子倉庫）
  • 2.子倉庫（子倉庫定義了namespaced: true），倉庫名：home
  • 3.使用strict嚴格模式（建議）
• 三、批量使用
• • 1、全局
  • • 1.sate的輔助函數
    • 2.getters的輔助函數
    • 3.mutations的輔助函數
    • 4.actions的輔助函數
  • 2、子倉庫
  • • 1.sate的輔助函數
    • 2.getters的輔助函數
    • 3.mutations的輔助函數
    • 4.actions的輔助函數

基礎版

一、倉庫

1.主倉庫

// store/index.js import Vue from "vue"; import Vuex from "vuex";// 引入子倉庫 import home from './modules/home.js'Vue.use(Vuex);const state = { //要設置的全局訪問的state對象,賦予初始屬性值index: 'home',isIndex: false, };const getters = { //實時監聽state值的變化(最新狀態)getIsIndex(state) { //定義函數，返回處理過的val，命名最好有代表性return window.location.hash.split('/')[1] === state.index}, };const mutations = {//自定義改變state初始值的方法，這里面的參數除了state之外還可以再傳額外的參數(變量或對象);// clearCatch(state, val) {// console.log(state, val)// }, };const actions = {//自定義觸發mutations里函數的方法，context與store 實例具有相同方法和屬性// clearCatchAction(context, val) {// context.commit('clearCatch', val);// },};export default new Vuex.Store({strict: true, // 此模式下所有的狀態變更（即更新state）必須使用mutationstate,getters,mutations,actions,modules: {home} });

2.子倉庫

namespaced為true時才是代碼和邏輯上的子倉庫，否則僅是代碼上的子倉庫

// store/modules/home.jsconst state = {};const getters = {};const mutations = {};const actions = {};// 注意和倉庫的區別 const store = {// namespaced用于在全局引用此文件里的方法時標識這一個的文件名，使得讓人明白這些數據來自哪個倉庫// 即當你需要在別的文件里面使用子倉庫(mapStates、mapGetters、mapActions)時，里面的方法需要注明來自哪一個模塊的方法// 若未設置默認是false，即子倉庫的數據也視為全局倉庫中的數據，此時的‘子倉庫’僅僅是代碼上的分割namespaced: true,state,getters,mutations,actions } export default store;

二、使用

1.全局（index.js和未開啟命名空間的子倉庫）

this.$store.state.isIndex

this.$store.getters.getIsIndex

this.$store.commit(‘clearCatch’,‘all’)

this.store.dispatch(‘clearCatchAction’,‘all’)

2.子倉庫（子倉庫定義了namespaced: true），倉庫名：home

this.$store.state.home.isIndex

this.$store.getters[‘home/getIsIndex’]

this.$store.commit(‘home/clearCatch’,‘all’)

this.store.dispatch(‘home/clearCatchAction’,‘all’)

3.使用strict嚴格模式（建議）

export default new Vuex.Store({strict: true,// 此模式下所有的狀態變更（即更新state）必須使用mutationstate: {...},... }

此模式下所有的狀態變更（即更新state）必須使用mutation（commit），如果在組件中直接修改state則會報錯。這樣的好處是所有的state的更新都體現在倉庫中，整改方便；使用devTools調試工具時可以跟蹤到狀態的修改。

三、批量使用

1、全局

1.sate的輔助函數

一般是寫在computed里面

mapState(*)

數組映射

computed: {// 3. mapState需要接收數組作為參數，數組的元素是需要映射的狀態屬性// 會返回一個對象，包含兩個對應屬性計算的方法// { count: state => state.count, msg: state => state.msg }// 然后這里使用擴展運算符展開對象，完成之后我們就有了count和msg兩個計算屬性...mapState(['count', 'msg'])}

字典映射（可起別名防止沖突）

computed: {// mapState可以傳對象，鍵是別名，值是映射的狀態屬性...mapState({ num: 'count', msg:'msg' })}

獲取數據時進一步處理

...mapState({ msg:state=>state.msg + '。'}),

映射后使用：this.msg

2.getters的輔助函數

一般也是寫在computed里面

mapGetters(*)

數組映射

computed: {...mapGetters(['getCount', 'getMsg'])}

字典映射（可起別名防止沖突）

computed: {...mapGetters({ num: 'getCount', getMsg:'getMsg'})}

映射后使用：this.getMsg

3.mutations的輔助函數

一般是寫在methods里面

mapMutations(*)

數組映射

...mapMutations(['clearCatch'])

字典映射

...mapMutations({clear:'clearCatch'}])

映射后使用：this.clearCatch(‘all’)

4.actions的輔助函數

一般也是寫在methods里面

mapActions(*)

數組映射

...mapActions(['clearCatchAction'])

字典映射

...mapActions({clearAction:'clearCatchAction'}])

映射后使用：this.clearCatchAction(‘all’)

2、子倉庫

同上，只是第一個參數是子倉庫名稱（并且子倉庫namespaced為true時）

1.sate的輔助函數

mapState(‘name’,*)

數組映射

computed: {...mapState('home',['count', 'msg'])}

字典映射（可起別名防止沖突）

computed: {...mapState('home',{ num: 'count', msg:'msg' })}

獲取數據時進一步處理

...mapState('home',{ msg:state=>state.msg + '。'}),

映射后使用：this.msg

2.getters的輔助函數

一般也是寫在computed里面

mapGetters(‘name’,*)

數組映射

computed: {...mapGetters('home',['getCount', 'getMsg'])}

字典映射（可起別名防止沖突）

computed: {...mapGetters('home',{ num: 'getCount', getMsg:'getMsg'})}

映射后使用：this.getMsg

3.mutations的輔助函數

一般是寫在methods里面

mapMutations(‘name’,*)

數組映射

...mapMutations('home',['clearCatch'])

字典映射

...mapMutations('home',{clear:'clearCatch'}])

映射后使用：this.clearCatch(‘all’)

4.actions的輔助函數

一般也是寫在methods里面

mapActions(‘name’,*)

數組映射

...mapActions('home',['clearCatchAction'])

字典映射

...mapActions('home',{clearAction:'clearCatchAction'}])

映射后使用：this.clearCatchAction(‘all’)

總結

以上是生活随笔為你收集整理的Vuex使用总结的全部內容，希望文章能夠幫你解決所遇到的問題。

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