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(‘异步方法名’,额外参数))调用方法
结果: