vue-antd-admin的全局状态管理非常好用!我们只需要在src/store/modules
下建立相关的文件,然后在同目录下的index.js下引用即可
这里来建立一个最简单的全局状态管理:
第一步:
在src/store/modules
建立一个模型, 比如:
每一个模型要有state来保存状态, 要有getters 来取状态数据, 要有mutations来设置状态数据
export default {
namespaced: true,
state: {
test: 1
},
getters: {
test: state => {
return state.test
}
},
mutations: {
setTest(state, value) {
state.test = value
}
}
}
第二步 index.js统一暴露
import account from './account'
import setting from './setting'
import device_zx from './device_zx'
export default { account, setting, device_zx }
第三步 引用
在具体的引用中, 我们可以参考user那些状态是怎么引用的, 总结起来具体步骤如下:
- 引入mapGetters和mapMutations
- 在computed中引入getter用于读取状态数据
- 在methods中引入mutations用于改变状态数据
- 在需要的地方使用
关于mapGetters和mapState的区别
上面的mapGetters其实可以用mapState代替,但这样做就缺少了数据预处理的过程,虽然我现在还没有什么预处理的要求,但是还是麻烦一点用了getter, 以备将来所需
mapGetters和mapState的区别请见:
https://segmentfault.com/q/1010000022337657?utm_source=tag-newest