海淀做网站的公司/seo代理计费系统

一.Vuex的概念和作用

之前我们学到过组件原型，所有的组件都继承自vue的原型，所以在原型上加一些东西，所有组件都能用，Vue.prototype.XXX就可以实现多个组件拿到原型上的数据，但是它有个弊端，它不像data被加入到vue的响应式系统中，我们自己定义的数据并不在响应式系统中，所以当其中一个组件修改了原型上的数据值时，其他组件的这个数据并不会跟着一起改，所以虽然这个方法能实现，但是不完善，由此我们就需要使用vuex。

二.单界面到多界面状态管理切换

1.单页面状态

2.多页面状态管理

2.1 两个有关系的组件，如父子组件共享数据


2.2 两个没关系的组件之间共享状态
(1)命令行安装完毕之后，如果在main.js里直接导入然后创建实例的话，代码较为混乱并且main会越来越大，所以这里写不好。

（2）我们创建store文件夹，里面有一个index.js，把刚才的引入和安装插件代码写到这个里面。（与vueRouter一致）然后再在main里面挂载一下。

index.js

main.js

（3）使用state保存状态，一旦在Vue挂载完之后，所有的组件都能拿到$store对象，于是就可以拿到保存的状态数据。


（4）修改state的值，不可直接通过事件修改，否则无法通过调试工具记录跟踪state值的改变，如下图:

所以通过mutations操作数据，action里是有异步操作的时候使用(比如发送网络请求时)，

那么我们在store里的定义就是这样：

定义完成之后，我们去组件中进行使用：
先定义事件

$store拿到store对象，再通过commit提交，在第一个参数的位置，传入在mutations里定义的方法名称，拿到mutations里的方法：

这样做就可以在调试工具里，对每一次操作改变的state状态进行跟踪记录。

vuex基本使用的总结：

3.state单一状态树的理解

三.Getters的使用

1.getters的基本使用

当我们从store里面拿某个数据的时候，这个数据是需要我们进行变化之后再给别人拿的，这种情况我们一般会定义一个对应的getters，在getters里面对数据进行变化，再让别人直接拿getters。
举例，我们先在state里面定义一个数组：

我们现在要在每个界面里获取年龄大于20岁的学生
一般情况下我们会在组件里定义computed，但是这样在每个组件都要写一遍computed，比较繁琐，也不便于管理。

那我们这时候就用到getters，

然后我们在组件中使用的时候，就直接使用getters中我们处理的数据

补充：
state相当于组件中的data
getters相当于computed
mutations相当于methods
action相当于异步methods
那么getters和mutation的区别就是，一个是获得，一个是事件触发。

也顺便补充一下计算属性和方法的区别：

• 计算属性是基于它所依赖的数据进行更新，在有在相关依赖的数据发生变化了才会进行更新，而普通的方法每次都会执行，每当触发重新渲染时，调用方法将总会再次执行函数。
• 计算属性是有缓存的，只要它所依赖的数据没有发生改变，后面的每一次访问计算属性中的值，都是之前缓存的结果，不会重复执行。
• 对于任何复杂逻辑，你都应当使用计算属性。

2.getters作为参数和传递参数

（1）还是上面的学生案例，我们现在要获取大于20岁的学生的个数。
getters可作为第二个参数传入，命名为其他也可以，仍然获得的是getters。（参数固定为state和getters，如果继续增加第三个参数是不被允许的）

（2）我们要获取年龄大于age的学生的数据（age是别人用getters的时候传进来的）
这里return出去一个函数，而不是结果，意味着在使用的时候按照函数调用的方式，并且传入参数。再在返回的函数中进行逻辑处理。（在组件的计算属性中也可以参照这个处理）


简写成箭头函数（不推荐这样写）：

四.mutations的携带参数

1.携带一个参数

现在有两个按钮，+5和+10

方法中传入参数，commit第二个参数直接带上传入的参数

mutations里面接收传过来的参数

2.传入多个参数时，放到一个对象里面统一传过来。

组件里面把数据合到一个对象里，然后commit传入。

然后mutations里面直接获取传过来的对象。

3.mutations的另一种提交风格

在下面这种提交方式中，传入的参数是作为一个payload载荷，它是一个对象（打印结果如第二张图）

这种提交风格时，mutations中打印的payload结果是个对象：

五.mutations的响应规则以及类型常量

1.响应规则

我们先在组件中展示一组state数据

然后写事件

我们来验证info里的属性是否是响应式（设置事件—修改state里的对象属性值），此时这个对象的属性值确实按照我们赋的值在界面上展示了，说明我们在创建对象的时候，已经将数据放入了响应式系统中，这些值都是被观察着的，每一个属性对应一个Dep对象，Dep可以监听属性的变化（观察者模式），通过观察者模式先观察数据是否变化，一旦发现有变化，就会查看有哪些地方需要根据数据变化去刷新界面，Dep->[watcher,watcher,…]，界面里有几处展示这个属性，就有几个watcher，发生变化时Dep就会拿到数组里面的watcher去通知它们变化（这就是内部的响应式系统）。

所以，当我们的属性一开始就定义到state里面，这些属性就会被加入到响应式系统中，而响应式系统会监听属性的变化，当属性变化时，会通知所有界面中用到该属性的地方，让界面发生刷新。

那么如果我们不是修改一开始就定义在state里面的数据，而是自己新增一个数据呢？这个数据还会是响应式的在界面中出现吗？

结果展示：新增的address没有在界面上展示出来。
原因：我们响应式是有个前提：属性在store中已经被定义，而address是后来被我们加上去的，它没有在响应式系统中，不属于我们监听的范围，所以尽管对象中确实有address被增加了，但界面中却没有刷新，无法展示。（响应式：数据变化界面跟着刷新）

那我们怎么去增加属性的同时界面一起刷新呢？
有一些方式，如数组的某个元素直接被赋值（this.a[0]=‘111’;），它不是响应式的；但有些方法如pop、push、splice等响应式方法它们修改数组的时候就是响应式的。
另外Vue.set()方法不仅可以修改数组，也可以修改对象，那么刚才的示例就可以这样写：

那么假如我们要删除某个属性呢？
很显然，我们寻常的delete方式不是响应式的，虽然删掉了属性，但界面没有刷新。

此时我们就可以使用Vue.delete方法删掉属性，并且界面可以同步。

2.mutations的类型常量

我们在组件里通过commit使用mutations的方法时，很容易写错名字，此时我们就把这个名字统一，定义为一个常量，组件中使用及mutations定义的时候，名字均为这个常量，就不容易出错了。


新建一个文件，把increment统一定义成一个常量INCREMENT并导出（导出方式不是export default，所以别处引入的时候要写成import{ XXX }，加上花括号）。

组件中导入并使用：


store的index中也导入并使用


所以我们在mutations里面定义了方法的名称，抽成一个常量，在其它界面提交（commit）的时候，也使用这个常量。

六.auctions的使用详解

我们模拟一个异步操作在mutations中改变属性值。
界面中确实改变了，但是devtool没有记录下来。所以我们不推荐在mutations里面进行异步操作。

那么我们就在action里面写异步操作，注意action里面第一个参数不再是state而是context，也就是store对象，我们在修改state的时候，也不能直接在action里面赋值，而是通过commit调用mutations里的修改state的方法（action的逻辑和组件里对于state修改的逻辑一样，不能直接修改属性值，对于数据的操作只有mutations可以做）

组件中通过dispatch调用action里的异步操作，action再通过commit调用mutations里的操作。

运行结果：调试工具也能跟踪到数据

那么action里面怎么传递参数呢？
直接在第二个参数的位置增加即可。


这里我们引入一个比较复杂的案例：我们在action里面异步修改了数据之后，通知组件已经修改成功
我们在aUpdateInfo中返回一个promise，哪个组件调用了aUpdateInfo对应的dispatch，那么这个dispatch调用完成之后，this.$store.dispatch('aUpdateInfo'，‘我是携带的信息’)，这一段返回的promise就是action里面aUpdateInfo函数返回的promise。所以action中return的promise直接就代替掉this.$store.dispatch('aUpdateInfo'，‘我是携带的信息’)这一行代码，后面的then就合理了（相当于promise-resolve-then了）。dispatch就是个中转，中转之后action里的promise就可以拿到组件里代替dispatch，

commit之后完成了异步操作对数据的修改。
dispatch返回一个promise，然action里的异步操作结束之后，传递一些信息给组件里。

运行结果：打印出来了action里面resolve传给组件的信息‘111111’

七.modules的使用详解

（1）模块放到state中并在组件中获取
创建一个moduleA，store里的modules里面把a（即moduleA）放到上面的state中，


（2）模块中有mutations
这里不关心updateName是在总的store的mutations里还是在moduleA的mutations里，只要两处的名称不重复，就不需要再通过.a去获取，直接提交给updateName就可以。

（3）模块中的getters

这里也不关心fullName在哪里面，直接获取就可以。

除此之外，getters作为参数时，也可以直接在后面写上，并且获取，在组件中使用。

那么如果我们除了处理moduleA里的数据，还想拿到总的store里的数据，该怎么处理呢？
通过rootState拿到即可。

（4）模块中的actions

getters里面的context是属于自己的。

但是打印出来context，我们发现它还是有root，也就是根（总的store）里的一些东西。（如果在store里面打印context，是不存在根的概念，因为本身store就是根，所以打印出来也不会有root相关的东西）


补充：vuex的项目结构