vuex状态管理解析及场景应用

vuex localStorage sessionStorage

• Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
• 状态管理，就是管理的全局变量。
  1. 在我们的项目中，特别是较大型的项目，会有很多参数是很多地方都会用到的，
  2. 比如，一个登录的token，很多页面都需要这个信息，当然我们可以时刻在对应页面操作cookie，但是有这么个统一管理的地方，为啥不用呢。
  3. 所以，状态管理不是必需的，所有状态管理能做的，都能用其他方式实现，但是状态管理提供了统一管理的地方，操作方便，也更加明确。
  4. 但是别啥都往里头扔了，一些只是父组件和子组件用到的，能用$emit和props简单实现的，就用这个就行了。
• 组成
  1. state（定义数据）
  2. mutation（唯一改变数据的方法）
  3. action（可以做一些异步的操作）
  4. getter（获取数据）
  5. Module（模块）

对比	vue	Angular	localStorage	sessionStorage
名称	vuex	ngrx/store	-	-
存储类型	对象类型	对象类型	字符串类型	字符串类型
存储位置	内存	-	本地	本地
时限（页面刷新）	丢失	-	永久	临时（页面关闭后丢失）

场景应用

1. 组件会被销毁

   • 假如有这样一个组件，他是弹窗，有一些复选框和输入框，用户会选择和填写信息；
     然后这个弹窗会被关闭和打开，
   • 由于业务需要，这个弹窗输入的内容，希望关闭后可以保留，在重新打开后，内容依然存在。

   解决办法：

   • 我们可以考虑将值存在父组件中，也就是说，实际修改的是父组件的值；
   • 存在比如 sessionStorage、cookies之类的里面，在 created 时从中读取，destroyed的时候写入其中；
   • 可以存到 global-event-bus 里面；但事实上，最好的还是存在 Vuex 里：
   • 可以直接通过 $store.state 来调用，通过 commit() 来修改值；也可以在 created 的时候，读取存在 state 里面的值，在 destroyed 的时候，写回 state；

   这样处理的优点是解耦，不跟其他组件打交道。不需要JSON.parse()、JSON.stringify()字符串跟对象来回转换

2. 多对多事件——多处触发，影响多处

   我们可以假设这样一个场景：

   • 假如有一个事件，比如：切换页面显示风格，他将改变某一个变量的值；
   • 当该变量为 true 时，那么页面风格为白天（主要影响 v-bind:style 的值）；
   • 当该变量为 false 时，那么页面风格为晚上（同上）；
   • 在多个地方可以切换这个页面风格开关；
   • 毫无疑问，这个变量将影响多个地方的 v-bind:style 的值；
   • 这就是 多对多 场景；

   那么：

   • 无论这个变量放在哪个组件里，其他组件调用他都是很麻烦的事情；
   • 即使存于根组件，然后通过 this.$root.xx 来获取这个变量，也是很麻烦的，而且很丑陋；

3. 多个视图依赖于同一状态：

   • 我们举个例子：假如我写了一个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 属性中。

小程序开发

• Taro vs uni-app选型对比经历
• 小程序开发：用原生还是选框架（wepy/mpvue/uni-app/taro）？