vue-antd-admin的全局狀態(tài)管理非常好用!我們只需要在src/store/modules
下建立相關(guān)的文件,然后在同目錄下的index.js下引用即可
這里來建立一個最簡單的全局狀態(tài)管理:
第一步:
在src/store/modules
建立一個模型, 比如:
每一個模型要有state來保存狀態(tài), 要有g(shù)etters 來取狀態(tài)數(shù)據(jù), 要有mutations來設(shè)置狀態(tài)數(shù)據(jù)
export default {
namespaced: true,
state: {
test: 1
},
getters: {
test: state => {
return state.test
}
},
mutations: {
setTest(state, value) {
state.test = value
}
}
}
第二步 index.js統(tǒng)一暴露
import account from './account'
import setting from './setting'
import device_zx from './device_zx'
export default { account, setting, device_zx }
第三步 引用
在具體的引用中, 我們可以參考user那些狀態(tài)是怎么引用的, 總結(jié)起來具體步驟如下:
- 引入mapGetters和mapMutations
- 在computed中引入getter用于讀取狀態(tài)數(shù)據(jù)
- 在methods中引入mutations用于改變狀態(tài)數(shù)據(jù)
- 在需要的地方使用
關(guān)于mapGetters和mapState的區(qū)別
上面的mapGetters其實(shí)可以用mapState代替,但這樣做就缺少了數(shù)據(jù)預(yù)處理的過程,雖然我現(xiàn)在還沒有什么預(yù)處理的要求,但是還是麻煩一點(diǎn)用了getter, 以備將來所需
mapGetters和mapState的區(qū)別請見:
https://segmentfault.com/q/1010000022337657?utm_source=tag-newest