Vuex的使用（案例解析）

Vuex

1.vuex概述

这三个只适合在小范围内进行数据共享，如果大范围和频繁共享，就得通过vuex。vuex就是对数据，也可以说是对状态，进行共享。

1.2

在组件旁边定义了个共享的数据状态store，组件A直接将数据共享到store中，如果其他组件需要用到子组件A向外共享的数据，那他们直接从store去获取，不需要进行复杂的传递。

1.3

2.Vuex的使用

el: 指定控制区域
render：渲染app根组件
router：挂载路由
store：新增的store节点，代表我们要将创建的共享数据对象挂载到vue实例中，这样所有的vue组件直接可以从store里面来获取并使用那些全局的数据了。

App.vue文件：根组件

项目的基本结构：
1.找到app.vue把里面的内容删除。
2.在components文件夹下面新建了子组件，这里demo中建立了两个子组件，一个Addition.vue，一个Subtraction.vue
3.在app这个根组件中分别导入了对应的两个子组件，并且注册为自己的私有组件，同时将注册的组件名称在页面上进行实用。

3.Vuex的核心概念

以上是访问state数据的第一种方式，state是一个属性，这个store实例需要写在store.js中，同时对数据的访问写在需要访问这个数据的子组件里（this关键字在template里面可以省略）。

以上是访问state数据的第二种方式，在某个组件中我们需要用到全局的count数据，那就在当前组件中先定义一个computed计算属性，在计算属性中调用mapState函数，需要用到哪些全局数据，就将全局数据名称在这里做个声明即可，最后在前面用展开运算符将全局的数据映射为当前组件的一个计算属性，这样再使用全局数据的时候，就像在用一个计算属性一样简单。以上的代码全部写在当前组件中。

在vuex中不允许组件修改全局数据，所以在组件中写改变全局数据的做法不可取！！！接下来引入Mutation以进行全局数据的修改

只有mutations里面的函数才有权利去修改state中的数据，当数据有问题可以直接从mutations里面去查看，在组件中不要直接去修改。在store.js中去写mutations，在需要访问全局数据的子组件里去写方法，然后把触发代码写入方法以访问。
commit的作用就是去调用某个mutation函数
上面的add方法中的第一个形参必须是自生state！

下面是再加一个参数传参的示例：

首先在add方法中定义一个参数，同时组件里在commit的时候通过第二个参数为这个方法传递参数。

上面是调用Mutations中函数的第二种方式，步骤如图注释，在methods结点中，去调用mapMutations函数，同时提供一个数组，需要将全局的每个函数映射为当前的一个methods，把对应的函数名在数组里进行声明，再在前面加一个展开运算符，这样在这个组件中，可以直接像调方法一样去调全局的这两个mutations函数。
用了mapMutations之后，那些全局的mutations函数就相当于是我当前组件的自己的函数，直接用this直接进行调用。

mutations中不能写异步代码，比如setTimeout异步函数，一旦写了，vue的调试工具就不能正常工作。
接下来引入能进行异步操作的方式

当前在mutations中我们只写了同步的代码，在actions里面我们写了异步的代码addAsync，在里面定义了一个setTimeout延时器，延时一秒之后调用回调函数，在回调函数中，我们执行了context.commit，commit只能去触发mutations里的某个函数，函数名为add。
所以在异步的actions里面，我们可以执行异步操作，但是如果actions里面想修改store里的全局数据，只能通过commit去触发对应的mutations。
那么在这里怎么调用commit呢？在异步函数中我们可以通过形参接收一个context，context相当于new出来的Store的实例对象，在这个实例对象中它有一个commit函数，那么context可以点出commit，这样就可以提交对应的mutations函数了。
那怎么触发对应的actions函数呢？

通过dispatch方法，可以触发某个对应的actions中的函数，比如要触发addAsync，那就需要在dispatch里面把对应的函数名声明过来即可。
注意：actions中虽然可以异步操作，但actions里面并没有权利修改state数据，在这里只能通过commit去提交一个mutation，让mutation帮助action去修改state数据。

首先我们触发了一个异步任务，同时通过第二个参数的形式，传递了一个参数，在actions中我们定义了一个addAsync函数，第一个参数永远是context，外界传过来的参数通过第二个参数进行接收，所以第一步，传递参数。第二步，在actions中接收这个参数。第三步，我们通过context.commit去触发了某个mutation，那这个mutation的名字叫做addN，同时在调mutation的时候，把接收到的step参数传到了mutation里面去，所以这是第三步，把参数传到了addN-mutation里面。第四步，看mutation里面的addN是如何定义，在这里我们通过step接收到了commit期间提交过来的step值。最后在mutation里面让state.count += step，就实现了异步+N的操作。
总的来说，要实现异步任务携带参数，只需要在定义action的时候，添加第二个参数就可以了。

步骤如上图，简化写法：每次把subAsync函数映射到子组件里面之后，还需要为按钮绑定一个处理函数，在下面的methods里面定义这个函数，再去通过this调用对应的action，那么为了简化，我们可以把click绑定的函数直接换为subAsync，也就是直接把映射过来的函数名直接绑到按钮上，这样就无需重新定义click的方法，而能直接使用映射函数。原理：mapActions本质上就是把全局的某个函数映射为自己的一个methods函数，那么既然subAsync成了自己的一个methods了，就相当于在这里定义了一个函数，叫做subAsync，所以直接把subAsync作为按钮的事件处理函数。

注意！getter不会修改state里的数据，它只起到一个包装的作用

getter相当于一个计算属性，以上是使用getter的两种方式。