vuex学习day02-state状态、严格模式（strict）、mutations、辅助函数mapMutations、actions

4、state状态

（1）作用：提供共享数据

（2）步骤：

        1）找到仓库，通过state提供共享数据

                        

报错1？：

解决方式：

找到.eslintrc.js文件，添加一行“indent”:[“off”,2]

报错2？：

解决措施：

用vscode打开.eslintrc.js文件，错误很明显

改正之后

2)访问（通过store直接访问或通过辅助函数访问）

①通过store直接访问

在模版中：

在js中

通过辅助函数访问：

②通过辅助函数mapState访问（简化代码）

mapState：把store中的数据自动映射到组件的计算属性中

步骤：

导入mapState

数组方式引入state，在computed中展开运算符映射（如果是多个，在数组中添加即可）

使用（类似于计算属性的使用）

效果：

5、严格模式（strict）

（1）作用：规范代码，进行错误提示

（2）示例：

Vuex遵循单项数据流，组件中不能直接修改仓库的数据

当在任意组件中修改数据，发现都可以（类似于没有进行子传父的操作，却成功修改了父组件的值），不便于维护

效果：

加strict之后：

效果：

（3）注：上线时要关掉严格模式，减少性能消耗

6、mutations

（1）修改state的数据步骤（state的数据修改只能通过mutations）

        1）定义mutations对象，对象中放入修改state的方法

        

        2）组件中提交mutations

                ①给需要修改state数据的地方添加方法

        ②提交mutations

（2）使用mutations修改state中出现的错误

        1）报错1（一个方法保存之后，中间原有空格消失）：

       ​​​​​​​                

解决：

效果：

（3）mutations传参

1）语法

        ①在mutations中提供带参数的方法

        仅能有一个额外的参数，若要传递多个参数，可用数组或对象传递

②在需要的地方提交调用mutations方法

③效果

7、辅助函数mapMutations

（1）作用：提取mutations，将其映射到组件methods中

（2）步骤：

已知：

Mutations中有某个方法

1）在需要的地方导入mapMutations

2）在methods中展开映射

3）使用

效果：

8、actions

（1）作用：处理异步操作（mutations必须是同步的，不处理异步）

（2）步骤

已知：

        

        1）在actions中提供异步操作的方法

        

        2）在需要的组件内，通过（this.$store.dispath(‘异步方法名’,额外参数)）调用方法

        

        结果：

        

        ​​​​​​​        ​​​​​​​