⑨ vuex状态管理

简介:原来的传参需要子父级关系才行。同级任意级别之间进行传参

第一步:安装vuex

cnpm install --save vuex

第二步:配置Vuex文件

创建一个index.js的文件

⑨ vuex状态管理_第1张图片
⑨ vuex状态管理_第2张图片

第三步:在主文件main.js中引入vuex

⑨ vuex状态管理_第3张图片

第四步:在组件中读取状态

第一种方式:
⑨ vuex状态管理_第4张图片
第二种方法:
⑨ vuex状态管理_第5张图片
/

vuex的状态管理核心

最常用的核心概念包含:State、Getter、Mutation、Action

Getter

对vuex中的数据进行过滤
⑨ vuex状态管理_第6张图片
conter > 0 数据才不会异常
第一种方案:
⑨ vuex状态管理_第7张图片
第二种方案:
⑨ vuex状态管理_第8张图片

Mutation

改变数据
可以修改所有组件中引用这个的值
⑨ vuex状态管理_第9张图片
⑨ vuex状态管理_第10张图片

加两个参数

⑨ vuex状态管理_第11张图片
第一种方式:
⑨ vuex状态管理_第12张图片
第二种方式:
⑨ vuex状态管理_第13张图片

Action

1、和mutation一样
2、可以异步操作

先安装axios

cnpm install --save axios

![在这里插入图片描述](https://img-blog.csdnimg.cn/2172c76d34b340a9b6c59a15a3bcb6ca.png⑨ vuex状态管理_第14张图片
第一种方式:
⑨ vuex状态管理_第15张图片
第二种方式:
⑨ vuex状态管理_第16张图片

你可能感兴趣的:(vue复习一下,前端,javascript,开发语言)