vue-antd-admin使用体验(五) 全局状态管理

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那些状态是怎么引用的, 总结起来具体步骤如下:

1. 引入mapGetters和mapMutations
2. 在computed中引入getter用于读取状态数据
3. 在methods中引入mutations用于改变状态数据
4. 在需要的地方使用

关于mapGetters和mapState的区别

上面的mapGetters其实可以用mapState代替,但这样做就缺少了数据预处理的过程,虽然我现在还没有什么预处理的要求,但是还是麻烦一点用了getter, 以备将来所需

mapGetters和mapState的区别请见:

https://segmentfault.com/q/1010000022337657?utm_source=tag-newest