一、 vuex 缓存方案
vuex 是全局状态管理，它采用集中式存储应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
1. 基本使用【推荐写法】
- 当需要过滤数据的时候，请优先使用 getters
- 推荐使用 vuex 提供的相关辅助函数进行获取和更改
- 推荐开启严格模式：无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。
- 不要在发布环境下启用严格模式！严格模式会深度监测状态树来检测不合规的状态变更——请确保在发布环境下关闭严格模式，以避免性能损失。typescript
const store = createStore({ // ... strict: process.env.NODE_ENV !== 'production' })
2. 结构搭建【官网推荐结构】
text
store
├── index.js # 组装模块并导出 store 的地方
├── actions.js # 根级别的 action
├── mutations.js # 根级别的 mutation
└── modules
├── cart.js # 购物车模块
└── products.js # 产品模块一些遵守的规则：
- 应用层级的状态应该集中到单个 store 对象中。
- 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
- 异步逻辑都应该封装到 action 里面。
本模板采用的是将 actions mutations 都封装到各自的模块中
3. 多模块自动化注册
- 在 store 文件夹中新建 index.tstypescript
import { createStore } from 'vuex'; interface ModuleObj { [moduleName: string]: any } // 动态模块注册 const modulesFiles = require.context('./modules', false, /\.ts$/); const modules = modulesFiles.keys().reduce((modules: ModuleObj, modulePath) => { const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1'); const module = modulesFiles(modulePath); modules[moduleName] = module.default; return modules }, {}) export default createStore({ modules, });
4. 解决刷新页面，vuex中的数据丢失的问题
在用vuex管理状态的时候发现state数据每次刷新都会清空， 这是因为数据是存储在内存中的，所以我们必须把它保存在 sessionStorage 、localStorage 或者cookie中等
1. 利用 session 或者 localStorage
- 在 mutations 的时候，将数据存储想要存储的缓存中
- 读取的时候，从缓存中读取，比如：在 state 直接从缓存中拿取数据