vuex的使用

一、导入子组件

1、导入自定义子组件并在components属性中注册，并且给重新起名为my…

2、在当前组件中使用子组件

3、明确子组件创建位置：

二、vuex的核心概念

1、state结点

(1)如何操作：

在根目录下的store.js中定义全局数据count

(2)组件中如何访问state数据

方法一、

例如，在组件Addion.vue中使用，注意：在组件中可以省略this关键字

方法二、将全局数据在相关属性的函数中声明一下就行，函数前面的三个点表示展开运算符

实战：

2、Mutation结点

实现计数器加功能常用思路：给button标签设置@click点击事件，在事件的函数里实现加操作，但是这样的话，就是组件改变了全局变量的值，但是在vuex中不允许组件直接修改全局变量的值，这是不合法的。

这时候就用到了Mutation结点,Mutation中可以定义很多事件处理函数
1.在此结点中定义函数add()，传入参数state,在函数中实现功能。
2.这样的话，只要在组件中调用功能函数就行（如右图所示，通过commit函数调用就行）

3.实战：
（1）在store.js中定义函数

（2）在组件中调用函数

4.如何在触发Mutation的时候接收参数

实战：
（1） 设置按钮，给一个点击事件

（2）在Mutation中写功能函数

（3）调用Mutation中的功能函数，并传给step一个参数为3

（4）结果

触发Mutation函数的第二种方法

实战：
（1）

触发Mutation函数并传值，实现计数器减n功能

总结：用mapMutation，就会把全局中定义的函数映射为当前组件的函数，就可以直接用this关键字来调用，而不用commit函数来调用了

---

state是将全局数据映射为组件的computed计算属性，
Mutation是将函数映射为组件的methods方法
state中放的是数据-------->computed
Mutation中放的是函数-------->methods

---

3、Getter结点

使用Gerters的两种方法：

实战：（注意：这里的结点后边都要加s，因为结点里边可以定义很多函数）
使用方法一、
注意：this在template组件中是可以省略的

使用方法二、