vuex store 缓存存储原理

vuex 的设计是将数据存在一个对象树的变量中，我们的应用（vue应用）从这个变量中取数据，然后供应用使用，当将当前页面关闭， vuex 中的变量会随着消失，重新打开页面的时候，需要重新生成。而，浏览器缓存（cookie，localstorage等）是将数据存到浏览器的某个地方，关闭页面，不会自动清空这些数据，当再次打开这个页面时，还是能取到之前存在浏览器上的数据（cookie，localst..

Osborn521

11330人浏览 · 2019-02-13 11:04:55

Osborn521 · 2019-02-13 11:04:55 发布

vuex 的设计是将数据存在一个对象树的变量中，我们的应用（vue应用）从这个变量中取数据，然后供应用使用，当将当前页面关闭， vuex 中的变量会随着消失，重新打开页面的时候，需要重新生成。
而，浏览器缓存（cookie，localstorage等）是将数据存到浏览器的某个地方，关闭页面，不会自动清空这些数据，当再次打开这个页面时，还是能取到之前存在浏览器上的数据（cookie，localstorage等）。
要使用 vuex 还是使用浏览器缓存，要看具体的业务场景。比如：像用户校验的 token 就可以存在 cookie 中，因为用户再次登录的时候能用到。而像用户的权限数据，这些是有一定安全性考虑，且不同用户的权限不同，放在 vuex 中更合理，用户退出时，自动销毁。
其次，vuex 中的 state 是单向的，也可以异步操作，这两个没有冲突。
vuex 中的 state 的设计思路是保证数据的一致性和连续性，而让 state 中的值只能通过 action 来发起 commit，进而改变 state 中的值。
而，action 中是 同步 还是 异步，都是单向地改变 state 中的值。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^