Vuex 和 localStorage 的区别

最新推荐文章于 2024-08-21 11:51:37 发布

丢掉幻想，准备战斗

最新推荐文章于 2024-08-21 11:51:37 发布

阅读量354

点赞数

文章标签：前端 json javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_38629440/article/details/130073859

版权

Vuex是Vue.js的状态管理模式，用于集中管理组件状态并确保状态变化的可预测性，适合组件间的通信，提供响应式数据。而localStorage是本地存储方式，适用于跨页面数据传递，数据以字符串形式存储。Vuex在刷新后数据丢失，但有持久化插件如vuex-persistedstate。当需要响应式数据共享时，Vuex更适合，而localStorage则不支持这种场景。

摘要由CSDN通过智能技术生成

Vuex 和 localStorage 的区别
最重要的区别：vuex 存储在内存中localstorage 则以文件的方式存储在本地，只能存储字符串类型的数据，存储对象需要 JSON 的 stringify 和parse 方法进行处理。读取内存比读取硬盘速度要快。

应用场景 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。vuex 用于组件之间的传值。localstorage 是本地存储，是将数据存储到浏览器的方法，一般是在跨页面传递数据时使用。 Vuex 能做到数据的响应式，localstorage 不能。

永久性刷新页面时 vuex 存储的值会丢失，localstorage 不会。注意：对于不变的数据确实可以用 localstorage 可以代替vuex，但是当两个组件共用一个数据源(对象或数组)时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，localstorage无法做到，原因就是区别 1。

vuex持久化插件
1) vuex-persistedstate
2) vuex-persist