简单分析vuex和localStorage的区别

Posted 2023-04-11

参考技术A 我觉得vuex既然是状态管理工具，那它的核心就是‘状态’一词，vuex中定义的某个state变量可以理解成一个状态，何为状态？就是这个变量可以被vue的响应式系统观察到，当它的值发生的变化的时候，页面可以响应到它的变化来主动做一些事情，你甚至可以理解成是一个全局的data。

我们可以回想下，在vue组件中，定义在data中的某个变量，如果这个变量被使用在html模板中，或者计算属性中，那么这个变量就是响应式的，当这个变量变化时，那么html模板便会重新渲染，计算属性也会重新计算，理解这一点，我们再来理解vuex，首先，上述的这个变量被定义在单组件中的data内，也就是说只有在这个组件内才能使用，可是在某些业务场景中，我们希望这个变量是覆盖全局的，也就是在任何一个组件内都能访问到这个变量，并且最重要的是还可以让它拥有响应式的属性，这个时候vuex这个工具就登场了，将这个变量定义在vuex中。。。。。具体用法就不教了。。。。

而localStorage中的数据只是一个静态的值，无法被观察。

localStorage，session Storage和Vuex

1.local storage

local storage以文件的方式存储在本地，永久保存。只能存储字符串类型， 对于其他类型可使用JSON.stringify和JSON.parse方法转换存储。

用法：localStorage.setItem("token": value);

localStorage.token = value;

localStorage[‘token‘] = value;

 

2.SessionStorage

session storage会话存储，临时保存，关闭页面就被清除。除此之外，session的限制还在于 同一浏览器、同一窗口并且同源。只能存储字符串类型， 对于其他类型需要json stringify和parse方法转换存储。

用法:

sessionStorage.setItem("token": value);

sessionStorage.token = value;

sessionStorage[‘token‘] = value;

3.Vuex

用于组件之间传值，当多个组件共用一个数据源的时候，如果此时数据发生变化，其他组件同时变化.But Vuex是存储在内存中的，页面刷新 =>清空内存=>所以状态会丢失。

可用于组件之间的通信。方便。

 

以上简单总结以便记忆