Vuex-1 ===>vuexdemo,getters,Muta

一 Vuex的解释

它采用 应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

其实我一开始学习看到Vuex集中式管理组件的状态,我就想这不就是一个拿公共变量吗?不论是我们用全局配置做,还是全局变量都可以做到,甚至是利用浏览器的localstore的cookie session也不是问题啊?
但是后面看到Vuex支持响应式管理咱就明白了,这玩意八成内部结合一些监听机制自己实现了,虽然咱们也可以自己造轮子,但是没必要~

二 VueX的使用范围

我们一般应用VueX来保存一些多个界面或者说组件之间共享或公共的一些状态和数据,尤其在其需要支持响应式的情况下.
eg:登录状态、用户名称、头像、地理位置、商品的收藏、购物车中的物品

三 Vuex的简单使用

如下图所示,我们简单的做个一个全局状态参数counter并在各个组件中使用测试响应式

说明以及注意:

• 我们在main.js文件，导入我们创建的store对象，并且放在new Vue中后在其他Vue组件中，我们就可以通过this.$store的方式，获取到这个store对象了,所以我们才可以用{{$store.state.counter}}得到counter值
• 我在测试的时候有在App.vue中通过点击按钮直接改变store.state.counter的值,这样虽然可以进行但是这是不对的或者说不被推荐的,理由如下👇

在Vuex官方文档中说到为了Vuex可以更明确的追踪状态的变化，所以不要直接改变store.state.count的值。 Vuex提供的状态管理流程

如果我们需要更改state的值最好通过Mutations更改,这样的话记录会被Devtools记录
至于Actions,如果我们需要先进行一些异步操作可以先在Actions中进行,在处理完成后再用Mutaltions进行变更状态.

四 Vuex推荐的状态管理方式

如上图,Vuex推荐用规定好的方式(由Mutations进行修改)，进行访问和修改等操作,下图是一个demo

五 .Vuex getters

vuex的getters类似于对象属性,如果我们需要从store中获取一些state变异后的状态，比如下面栗子： 注意:我们利用getter计算state的属性时候需要在参数里传state

getters默认是不能传递参数的, 如果希望传递参数, 那么只能让getters本身返回另一个函数.
比如上面的案例中,我们希望返回大于传过来的年龄的对象
注意:
- 这里的getter里的函数,我们必须先返回一个函数在函数内指定接收的参数
- 并在函数内return一个返回值.

六. Mutation状态更新详解

6.1Mutation状态更新

Vuex的store状态的更新唯一方式：提交Mutation

Mutation主要包括两部分：

• 字符串的事件类型（type）(方法名.如下的increment)
• 一个回调函数（handler）(function(){}),该回调函数的第一个参数确定为state。

mutation的定义方式： 通过mutation更新

6.2 Mutation传递参数

在通过mutation更新数据的时候, 有可能我们希望携带一些额外的参数,这个参数被称为是mutation的载荷(Payload)
直接举个栗子说明了,跟我们前面的没啥两样,主要在调用this.$store.cmmit的时候要把参数传过去(载荷),在Mutations中定义的回调函数要用第二个参数接收.

---

上面的通过commit进行提交是一种普通的方式,Vue还提供了另外一种风格, 它是一个包含type属性的对象

Mutation中的处理方式是将整个commit的对象作为payload使用, 如下:

6.3Mutations类型常量

问题:在mutation中, 我们定义了很多事件类型(也就是其中的方法名称).
当我们的项目增大时, Vuex管理的状态越来越多, 需要更新状态的情况越来越多, 那意味着Mutation中的方法越来越多.
方法过多, 使用者需要花费大量的经历去记住这些方法, 甚至是多个文件间来回切换, 查看方法名称, 甚至如果不是复制的时候, 可能还会出现写错的情况.

如何避免上述的问题呢?

• 一种很常见的方案就是使用常量替代Mutation事件的类型.
• 我们可以将这些常量放在一个单独的文件中, 方便管理以及让整个app所有的事件类型一目了然.

具体做法:

• 我们可以创建一个文件: mutation-types.js, 并且在其中定义我们的常量.
• 定义常量时, 我们可以使用ES2015中的风格, 使用一个常量来作为函数的名称. image.png

参考小码哥 coderwhy