vuex localStorage sessionStorage
- Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
- 状态管理,就是管理的全局变量。
- 在我们的项目中,特别是较大型的项目,会有很多参数是很多地方都会用到的,
- 比如,一个登录的token,很多页面都需要这个信息,当然我们可以时刻在对应页面操作cookie,但是有这么个统一管理的地方,为啥不用呢。
- 所以,状态管理不是必需的,所有状态管理能做的,都能用其他方式实现,但是状态管理提供了统一管理的地方,操作方便,也更加明确。
- 但是别啥都往里头扔了,一些只是父组件和子组件用到的,能用$emit和props简单实现的,就用这个就行了。
- 组成
- state(定义数据)
- mutation(唯一改变数据的方法)
- action(可以做一些异步的操作)
- getter(获取数据)
- Module(模块)
对比 | vue | Angular | localStorage | sessionStorage |
---|---|---|---|---|
名称 | vuex | ngrx/store | - | - |
存储类型 | 对象类型 | 对象类型 | 字符串类型 | 字符串类型 |
存储位置 | 内存 | - | 本地 | 本地 |
时限(页面刷新) | 丢失 | - | 永久 | 临时(页面关闭后丢失) |
场景应用
-
组件会被销毁
- 假如有这样一个组件,他是弹窗,有一些复选框和输入框,用户会选择和填写信息;
然后这个弹窗会被关闭和打开, - 由于业务需要,这个弹窗输入的内容,希望关闭后可以保留,在重新打开后,内容依然存在。
解决办法:
- 我们可以考虑将值存在父组件中,也就是说,实际修改的是父组件的值;
- 存在比如 sessionStorage、cookies之类的里面,在 created 时从中读取,destroyed的时候写入其中;
- 可以存到 global-event-bus 里面;但事实上,最好的还是存在 Vuex 里:
- 可以直接通过 $store.state 来调用,通过 commit() 来修改值;也可以在 created 的时候,读取存在 state 里面的值,在 destroyed 的时候,写回 state;
这样处理的优点是解耦,不跟其他组件打交道。不需要JSON.parse()、JSON.stringify()字符串跟对象来回转换
- 假如有这样一个组件,他是弹窗,有一些复选框和输入框,用户会选择和填写信息;
-
多对多事件——多处触发,影响多处
我们可以假设这样一个场景:
- 假如有一个事件,比如:切换页面显示风格,他将改变某一个变量的值;
- 当该变量为 true 时,那么页面风格为白天(主要影响 v-bind:style 的值);
- 当该变量为 false 时,那么页面风格为晚上(同上);
- 在多个地方可以切换这个页面风格开关;
- 毫无疑问,这个变量将影响多个地方的 v-bind:style 的值;
- 这就是 多对多 场景;
那么:
- 无论这个变量放在哪个组件里,其他组件调用他都是很麻烦的事情;
- 即使存于根组件,然后通过 this.$root.xx 来获取这个变量,也是很麻烦的,而且很丑陋;
-
多个视图依赖于同一状态:
- 我们举个例子:假如我写了一个component,取名叫A,A里有一个table,我需要从数据库中取出很多数据,填到table里。
- 那我需要在A中请求一个接口,然后定义一个变量去保存它,
- 之后我又写了一个component,取名叫B。
- A,B组件互为兄弟关系。B里有一个table,也需要这个数据,那这时我需要怎么做呢?
- 有人会说:我可以再去请求这个接口,把数据再取出来,再定义一个变量去保存它。
- 这样做对于小项目来说,可能没有什么太大的问题,但是对于中大型项目来说,多一次请求就会对服务器多一份负担。
- 再者,如果我不止A,B两个组件需要用到这个数据呢?我有A,B,C,D,E,F组件…都要这个数据,我总不能每次都去请求一下我的接口去拿数据吧。
- 那我需要怎么做呢?结合前面所说的,这个时候vuex就可以帮我们解决这个问题。
- 我可以只访问接口一次,拿到这个数据,然后存到这个”全局变量“里,用的时候直接取,不管有多少组件需要,都可以拿来就用。
- 这就是Vuex的一个好处。
总结
- 假如你需要 数据 和 组件 分离,分别处理,那么使用 Vuex 是非常合适的。
- 相反,如果不需要分离处理,那么不使用 Vuex 也没关系。
- 比如某个数据只跟某组件打交道,是强耦合的。那么这个数据就应该存放在该组件的 data 属性中。