Vuex是一個專門為Vue.js應用程式開發的狀態管理模式,采用集中存盤來管理資料,是一個單獨的全域化管理模式
1.下載vuex
npm i vuex
2.匯出
在src目錄下創建store/index.js
index.js
import Vuex from 'vuex'
注冊
import Vue from 'vue'
Vue.use(Vuex)
實體化
const store =new Vuex.Store({
state:{
// 共享的數值
},
mutations:{
}，
actions:{
},
getters:{
}
})
暴露出去 export default store3.匯入
在main.js中匯入并且掛載到vue上
import store from '@/store'
new Vue({
store
})這樣就設定好了一個全域的倉庫，可以將資料保存到倉庫中
——各種獲取資料方法
在vuex中，獲取資料分為：
- 直接獲取根倉庫資料
- 獲取模塊資料
直接獲取
直接獲取可以通過定位倉庫獲取和使用輔助函式獲取
| 直接獲取倉庫內的資料 | |
| state | this.$store.state.資料名 |
| mutations | this.$store.commit.方法名 |
| actions | this.$store.dispatch.方法名 |
| getters | this.$store.getters.方法名 |
在vuex中封裝了輔助函式方便我們進行呼叫倉庫內的資料,它通過映射器來反饋出倉庫內的資料,這個映射需要將輔助函式展開后才能使用,當直接呼叫時接收一個陣列,這個陣列內的值就是需要呼叫的資料或者方法.
獲取模塊內的資料
獲取資料之前需要先創建模塊
在store檔案夾內新建一個modules檔案夾然后創建一個模塊js檔案,模塊內的布局與index.js相同
const state = {}
const mutations = {}
const getters = {}
const actions = {}
export default {
namespaced: true,
state: state,
mutations: mutations,
actions: actions,
getters: getters
}namespaced命名空間默認為false，當它為true時想要訪問模塊必須加上模塊名
| 獲取模塊內的資料 | |
| state | this.$store.state.模塊名.資料名 |
| mutations | this.$store.commit('模塊名/方法名') |
| actions | this.$store.dispatch('模塊名/方法名') |
| getters | this.$store.getters['模塊名/方法名'] |
因為state本身已經具有命名空間所以不受影響直接嵌套
輔助函式
輔助函式一共有四個
- mapState
- mapMutations
- mapActions
- mapGetters
注意：所有的輔助函式映射時都需要使用展開運算子展開
輔助函式
//在組件中匯入mapstate輔助函式
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
computed: {
...mapState('模塊名', ['資料名']),
...mapGetters('模塊名', ['方法名'])
},
methods: {
...mapActions('模塊名', ['方法名']),
...mapMutations('模塊名', ['方法名'])
},
//呼叫就相當于直接在組件內呼叫模塊內actions詳細寫法
actions 屬性中有六個引數
呼叫
store.state
store.rootState
store.commit
store.dispatch
store.getters
store.rootGetters
//store內有六個引數
actions:{
方法名(store){
store:{
state:當前模塊的state資料,
rootState:根模塊下的state資料
rootState.模塊名.屬性名
commit:呼叫mutations方法
呼叫本模塊的mutations方法： commit('本模塊的mutations方法名'，實參值)
呼叫其它模塊的mutations方法：commit('模塊名/方法名',實參值（沒有用null點位）,{root:true})
dispatch:呼叫actions方法
呼叫本模塊actions方法：dispatch('本模塊的actions方法',實參)
呼叫其它模塊的actions方法:dispatch('模塊名/方法名'，實參（沒有用null占位）,{root:true})
getters:呼叫getters方法
getters.本模塊的getters方法名
rootGetters:呼叫根模塊下的getters方法
呼叫其它模塊的getters:rootGetters['模塊名/其它模塊getters方法']
}
}
}
getters完整寫法
類似于actions
getters:{
方法名(state,getters,rootState,rootGetters){
state:當前模塊的state資料,
rootState:根模塊下的state資料
rootState.模塊名.屬性名
getters:呼叫getters方法
getters.本模塊的getters方法名
rootGetters:呼叫根模塊下的getters方法
呼叫其它模塊的getters:rootGetters['模塊名/其它模塊getters方法']
}
}
},轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/357000.html
標籤：其他
下一篇：配置開發環境和生產環境基礎地址