# Vuex与缓存
[Vuex](https://vuex.vuejs.org/zh/) 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。  
Pro也使用了Vuex，并与缓存相结合，Vuex所有的数据的数据都会同步到sessionStorage，同时你还可以配置是否持久化，持久化的数据会存储到loaclStorage，当然，我们开发者只需要配置即可
:::warning 提示
目前的实现方式也会有一些缺憾，当前还不支持Vuex分module调用，当然，我们的理由是，你并没有那么多状态需要管理
:::
在@/scr/store/index.js中，我们配置了一个store初始化方法，在这里你只做如下几步操作
1. 设置缓存的命名空间，尽可能不与其他项目重复
2. 设置initData,这里的键会作为state的key和mutation的type，由于mutation是自定生成的，
所以不需要配置mutation，action可以随意添加，需要主意的是state的结构，每个state对应设个
两个属性，persistence即是否持久化，持久化的数据将被存入localStorage,default为真正的值
```javascript
// 初始化命名空间，这里必须配置
cache.initNamespace('__ADMIN__DEMO')

Vue.use(Vuex)

const initData = {
  // 样例，取值 this.$store.state.userInfo,提交 this.$store.commit('userInfo', {})
  userInfo: {
    persistence: true, // 是否持久化，是否存入localStorage
    default: {}
  },
  token: {
    persistence: false,
    default: ''
  },
  userMenu: { // 用户权限菜单
    persistence: false,
    default: []
  },
  // 表格最大高度，使用于element-ui表格，如果你的页面比较多样或差一项较大，则建议放到具体的组件中去保存
  maxTableHeight: {
    persistence: false,
    default: 500
  },
}
```
正确配置后，基本可以告别在项目中直接操作缓存