标题换句话来讲,就是,localstorage可以代替vuex吗?
问:在使用vuex的时候,vuex的数据不能持久化存储,将vuex的数据存到本地,localStorage即可实现数据持久化存储的问题,你既然用来本地存储,为什么还用vuex,有什么区别吗?
vuex存储与本地储存的区别
1、区别:
- vuex存储在内存
- localstorage(本地存储)则以文件的方式存储在本地,永久保存(不主动删除,则一直存在)
- sessionstorage( 会话存储 ),临时保存
localStorage 和 sessionStorage只能存储字符串类型,对于复杂的对象可以使用ECMAScript提供的JSON对象的 stringify 和 parse 来处理。
2、应用场景:
vuex用于组件之间的传值
localstorage,sessionstorage主要用于不同页面之间的传值
3、永久性:
当刷新页面(强刷,属于清除内存,导致store初始化)时vuex存储的值会丢失(这也导致了vuex也不是十全十美的,强刷之后如果还要保留之前的数据就得需要配合localstorage或者sessionstorage使用,后面会讲到)
sessionstorage页面关闭后就清除掉了,localstorage不会,但有个注意点就是只能保存string类型的值,可数据转化JSON或者按规律存字符串
4、响应&监听:
注:大家可能觉得用localstorage可以代替vuex, 对于不变的数据确实可以,但是当两个组件共用一个数据源(对象或数组)时,如果其中一个组件改变了该数据源,希望另一个组件响应该变化时,localstorage,sessionstorage无法做到,理由如下:
第一:
Vuex就是对数据进行管理,对每一次数据变化进行跟踪
localstorage,sessionstorage只是存与取
第二:
如果非要进行比较的话,对于不变的数据确实可以两者确实能代替,但是当两个组件共用一个数据源(对象或数组)时,如果其中一个组件改变了该数据源,希望另一个组件响应该变化时,localstorage,sessionstorage无法做到,而vuex把...mapState()放到computed中就可以实现。
虽然也可以用window.onstorage监听,但按照这个思路不断写下去,你会发现自己撸出了一个状态管理器来。说到底,一个是数据容器,一个是数据管理器。所以二者的目的不同,不能简单说谁能代替谁。
假如ab两个组件都在用本地存储,你改变了a组件里的数据,a页面数据虽然会同步到本地存储,但是由于数据不是响应式的,所以b页面的数据不会变,除非每一个用到响应式的地方onstorage监听改变数据。
总结:
总的来说,vuex是为了用来响应,而本地存储的数据不是响应式的!!!