一、 Vuex 是什么?
![](https://ucc.alicdn.com/pic/developer-ecology/27m6fhnwz2rb2_b78b8e61d91849faa17713477a5b9111.png?x-oss-process=image/resize,w_1400/format,webp)
概念: 专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对Vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信
二、什么时候使用Vuex
(1)多个组件依赖于同一状态
(2)来自不同组件的行为需要变更同一状态
三、搭建坏境
(1) npm install vuex
(2) Vue.use(Vuex)
(3) store
(4) vc==>store
创建文件src/store/index.js
![](https://ucc.alicdn.com/pic/developer-ecology/27m6fhnwz2rb2_423336c7c3e1473e8e0410ec18e965a7.png?x-oss-process=image/resize,w_1400/format,webp)
![](https://ucc.alicdn.com/pic/developer-ecology/27m6fhnwz2rb2_674bd0af826d4bb7a6565e599b08e2ba.png?x-oss-process=image/resize,w_1400/format,webp)
在main.js中创建vm时传入store配置项
![](https://ucc.alicdn.com/pic/developer-ecology/27m6fhnwz2rb2_0eb0913bdabe4b57a8f3fd5da4cd3641.png?x-oss-process=image/resize,w_1400/format,webp)
Vuex工作原理图
![](https://ucc.alicdn.com/pic/developer-ecology/27m6fhnwz2rb2_dfbc582d6b9b4c1f85cb158c5697a255.png?x-oss-process=image/resize,w_1400/format,webp)
![](https://ucc.alicdn.com/pic/developer-ecology/27m6fhnwz2rb2_1768b59a5e6b4e1199f3d0d354b3f063.png?x-oss-process=image/resize,w_1400/format,webp)
![](https://ucc.alicdn.com/pic/developer-ecology/27m6fhnwz2rb2_18b489e8b1574dff9ed4b55645e238df.png?x-oss-process=image/resize,w_1400/format,webp)
![](https://ucc.alicdn.com/pic/developer-ecology/27m6fhnwz2rb2_e08d3a653d574293b2d432a3e2ddba51.png?x-oss-process=image/resize,w_1400/format,webp)
![](https://ucc.alicdn.com/pic/developer-ecology/27m6fhnwz2rb2_1e6b7f0bb65f46f19fcdf2283753ca6c.png?x-oss-process=image/resize,w_1400/format,webp)