vuex和本地存储的区别
时间: 2023-10-12 13:08:12 浏览: 96
基于vue2.0+vuex+localStorage开发的本地记事本示例
vuex和本地存储有以下几点区别:
1. 实质的区别:vuex存储的是状态,而存储在内存中;本地存储(如localStorage)是浏览器提供的接口,用于以文件的形式将数据存储在本地。
2. 存储方式:vuex将状态存储在内存中,而本地存储将数据以文件的形式存储在本地。
3. 永久性:当刷新页面时,vuex存储的值会丢失,而本地存储(如localStorage)不会丢失,数据可以永久保存。
4. 数据类型:vuex可以存储复杂的对象或数组等数据类型,而本地存储只能存储字符串类型的数据。对于复杂的对象,可以使用JSON对象的stringify方法将其转换为字符串存储,并使用parse方法将其解析回对象。
5. 使用场景:vuex主要用于组件之间的传值,而本地存储(如localStorage)主要用于不同页面之间的传值。在购物车、会话状态(如token)以及一些不经常改变的数据(如城市列表)等场景下,可以使用vuex或本地存储来进行数据状态持久化。
总结而言,vuex主要用于管理组件之间的状态,而本地存储主要用于在浏览器中永久保存数据。虽然本地存储可以替代vuex在某些场景下进行数据存储,但是对于需要实现数据响应式的情况以及多个组件共享同一数据源的情况,vuex更为适合。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [vuex存储和本地存储的区别](https://blog.csdn.net/qq_51781439/article/details/120866904)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [vuex存储和本地存储(localstorage、sessionstorage)的区别](https://blog.csdn.net/weixin_43758377/article/details/109205395)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
阅读全文