本来说好写完组件通信后就会写vuex相关的东西,现在快过去两个多月了,主要是由于自己工作的原因,后面会保证更新速度的。不废话了,直接正题。
介绍(官方套路)
什么是vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式(至于什么是状态管理模式我就不科普了)。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
为什么需要vuex
上篇文章说过了,当一个应用比较简单的时候,组件之间的通信以及交互都不会很多,上篇中介绍的通信方法足够应付大多数的场景。但是当应用足够复杂,多个组件共享一个状态的时候,前面的方法会十分繁琐混乱并且不易管理。所以我们就需要将组件共享的状态抽取成一个类似全局变量的东西,任何组件都可以get以及set这个状态,这样就可以实现状态的高效管理。另外,通过定义和隔离状态管理中的各种概念并强制遵守一定的规则,我们的代码将会变得更结构化且易维护。
核心概念
store
每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同:
- Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
- 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
如何将store注入我们的应用(下面的所有代码我将以购物车为例)
先将项目结构放出来
|
|
你可以通过store.state获取状态值,你也可以通过store.commit(‘add’)来改变状态。
这里不通过直接修改store.state的值,而是通过提交mutation去变更,主要是为了使得整个数据的变更可以追踪。举个例子:门禁卡,每次进出我们刷一下卡系统显示的是你的名字,知道你来了。刷卡的过程就是你提交的mutation,声明一声:你大爷来了,然后系统(仓库状态)记录一下状态。后面查询出入记录的时候就有迹可循。
state
state是单一状态树,用一个对象包含所有应用层级的状态,具有唯一性。(这种话太官方,就是一个对象,名字叫state。)
state的读写就是store中的代码。由于 Vuex 的状态存储是响应式的,所以我们在组件中通过计算属性去返回某个状态:
或者采用辅助函数mapstate,这里先用,后面我会讲一下原理。
我们之所以可以这么使用,是因为Vuex 通过 store 选项,提供了一种机制将状态从根组件“注入”到每一个子组件中(需调用 Vue.use(Vuex)):
Getter
简单点介绍getter就是vuex中的计算属性。
下面对比一下 computed VS getters
|
|
通过上面我们可以看出 计算属性computed返回给当前的组件或者他的子组件使用的,但是getters将store的state中的值重新计算后供整个应用使用,但是原理是类似的。同时从代码可以看出getter可以接受其他getter当做第二个参数使用,就像在贵的上面筛选出更贵的。
至于怎么使用getter就比较简单了,将getters添加到参数对象中就可以了
调用getters,两种方法
|
|
Mutation
概念
mutation就是事件类型与事件回调,本身这个应该在前面讲比较合适,因为这是更改状态的第一步,但是官方按照这个顺序,我们就还是按原样。
每一个mutation都会有一个事件的type和callback,当我们store.commit(‘plus’)一个事件后,vuex会根据它的type(plus),然后调用相应的callback执行增加的操作,然后去变更仓库中的状态。
载荷
同时你可以向store.commit增加额外的参数,这会被当做mutation的载荷playload。
使用常量替代 Mutation 事件类型
这块其实很简单,就是将额外编写一个专门存放type的文件引入mutation,将常量作为各个mutation的事件类型
Mutation 必须是同步函数
这个是mutation中最重要的一点,如果你在mutation中有异步的回调,那么追踪记录就不可能了,这样就破坏了vuex的初衷。
具体代码
|
|
Action
概念
action就是异步提交mutation。Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,但是这个context对象不是store本身,因为后面介绍到的Module会存在局部context和根context两种。
有个图很好的说明了action的具体实现,这里dispatch出action后,再在回调里面去commit mutation,这样即便是回调依然可以追踪到相关的状态变更记录。
分发action
Action 通过 store.dispatch 方法触发,支持载荷方式和对象方式进行分发,这里我自己的项目里面没有用到action,但是我们可以假设一个场景,就是你添加商品的时候需要请求接口判断库存(不过一般都不会这么去设计):
action也是支持嵌套的,是因为store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise,并且 store.dispatch 仍旧返回 Promise。
你可以这么使用
在另外的action中
Module
概念
module这块其实不太想讲的,因为官方的文档写的相当清楚。这里就稍微搬弄一波。仓库虽然可以存放很多东西,但是东西太多了之后也还是会凌乱,所以我们需要分区,module就是将store分成单独的模块,每个module享有自己独有的state,mutation,action,getter甚至是嵌套的子模块。
我的代码中没有使用module,这里依然使用官方的例子解释,使用代码很简单,看一下就好了:
模块的局部状态
因为每个module都有自己的局部状态,那么必然就会区分局部状态和根状态,主要注意的也就是这点局部状态和根状态,mutation,action,getter,通过不同的参数位将局部和根状态传入这里就没有代码了,看官方的文档还是非常清楚的。
命名空间
这个就是让模块有更高封装度的的一个属性 namespaced: true。
这样这个模块的里面的mutation,action这类都会有相应的路径。就像下面的代码,如果我们去掉namespaced:true,那么account模块中的getters,actions,mutations里面的方法都是全局可以访问的。但是加了namespaced:true,就需要加上对应的模块路径访问。
module里面其他的就不讲了。最后讲下上文提到的辅助函数,这里以mapstate为例。
辅助函数mapstate
下面的是mapstate的源码:
这里我先将这个方法简化一下
我们先看上面的代码mapstate首先调用的是normalizeNamespace这个函数,我们再看normalizeNamespace这个方法里面的逻辑:
这个函数接受一个方法作为参数,返回一个函数,这个函数也就mapstate。mapsate接收两个参数namespace和map,这里的namespace就是上面module当中介绍到的命名空间里面的namespace。当namespace不传的时候就将第一个参数(映射的对象)赋给map,或者传入namespace就对其进行类型判断以及格式校验后,返回传入的fn的调用。
然后我们具体看传入的fn这个函数具体干了什么,首先定义一个空res对象,然后调用normalizeMap(这个函数的解析在下面)这个方法将states转化为每项都是{ key: key, val: key }格式的对象数组,然后foreach遍历。
遍历里面将上面的对象数组的key,val重新整理进入res中。mappedState具体里面的逻辑如下:
默认进来state和getters是全局仓库里面的,然后再去判断是否有namespace这个,如果有将对应的那个module中的state和getters覆盖掉全局的那个,最后判断val如果是函数,就直接调用这个函数,并且将前面定义好的state以及getters当做参数传入,如果不是函数则直接取值。
res[key].vuex = true;这行就是提供给插件使用的。
normalizeMap这个方法判断了map书否是数组,如果是就将map中每一项转化为{ key: key, val: key }的对象,否则传入的 map 就是一个对象(因为mapstate传入的参数不是数组就是对象),那就调用Object.keys获取map的所有key值,然后key数组再次遍历转化为{ key: key, val: map[key] }这个对象,最后将这个对象数组作为normalizeMap的返回值。
差不多就是这些啦,其他的辅助函数也都是类似的,有兴趣的可以去官网看看源码。有错希望大家及时指出,我只是代码的搬运工,哈哈…
相关文档:
所有相关代码在我的GitHub : https://github.com/moyueating/vue-communication
vuex : https://vuex.vuejs.org/zh-cn/
vuex gitHub : https://github.com/vuejs/vuex/blob/dev/dist/vuex.common.js