Vue再学习12——vuex学习

背景介绍

对于多组件数据传输中，我们用到的全局时间总线进行数据传递，是一个单方向的数据传递过程。但是对于正常环境，如果数据到处都会修改的情况，则实现起来会非常复杂。

对此，针对这种处处都会用，处处都要改，同时改后数据处处需同步的情况，我们采用vuex来进行数据的同步。

 

vuex的使用原理

 

 

在这里，最终进行数据处理的是mutations。对于vuex管理部分的内容，统一都归于store进行管理。

通过Vue.use(Vuex)，vue的所有控件中都多出了$store属性

 

 

vue引用步骤

1、创建store核心文件 

引入vuex和store

但是！但是！这里会报错，因为在Vue.use(vuex)之前，store就创建了，store创建需要使用到vuex。（也不能将import写到Vue.use之后，因为没用，vue解析import是全局先扫描之后统一执行。）

 

对此我们的解决方案为：在store中进行vuex插件的引入

 

vuex的使用

 

根据vuex的生命周期，

1、我们在组件中通过dispatch进行action方法的调用 

2、创建actions，并通过commit操作将方法传递给mutation

注意：这里的context相当与一个ministore对象，存储这需要的大部分方法。

3、创建mutation

 在mutations中对store中的数据进行修改。

4、store中的数据修改之后展现到界面上

 

vuex的标准套路

对于vuex来说，我们遵循他的生命周期，是通过dispatch出发action，action出发mutation之后修改state。

但是也可以不按照标准套路来：比如直接修改state中数据，或者跳过action，直接触发mutation

 这样做看似方便，但是当业务逻辑复杂时，复用性会比较差。最好还是按照标准流程处理。

vuex的getters

这里state像是数据源，getters拿数据源进行数据加工

 

mapstate、mapgetter、mapMutations、mapActions

引入四个关键属性

mapstate：

通过借助mapstate生成计算属性，从state中读取数据（对象写法）

通过“...”这个写法，我们将上面计算属性的方法进行了简化。（...是es6语法，相当于把里面的内容单个展开）

 数组写法：

这里需要注意的是我们获取的属性和这里定义的属性必须保持一致。

mapgetter：

直接去getters中去获取属性

 

mapMutations:

这里，我们通过mapMutations申明了要调用的方法increment，其绑定的是mutations中的JIA

 在使用时，调用方法如下：

同样的，如果调用名和mutations名字一样，我们可以采用数组写法

mapActions

生成与actions进行调用的方法

注意：

mapActions与mapMutatuons使用时，若需要传递参数需要，则在模板中绑定事件时传递好参数，否则传递的是事件

vuex模块化编程

1、vuex配置

根据业务场景的不同，我们对vuex可以进行多个模块的配置，

 2、暴露store

在暴露store的过程中，我们采用modules进行包裹，

 暴露之后，我们在vue对象中，看到的store的数据则包裹在a下

3、使用

则我们在使用过程中，需要以模块为单位进行引入

 使用时，需要点出来

如果我们不想点出来，而是希望直接使用，我们可以这么写：

 后面这部分属于countAbout中的state的内容。

 

只有加了namespaced这个属性，才可以暴露出去。

 对于多个state的引入，我们可以建立多个...mapstate

actions和mutations的申明可以这样写：

总结开发步骤：