[TOC]
## vuex的实现流程图
![](https://box.kancloud.cn/288a0dc913bab3fe765baf18fb4bac27_701x551.png)
## 1.NPM安装
```
npm install vuex --save
```
## 2.src目录下新建store.js的文件
```
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
city:'天门'
},
mutations: {
},
actions: {
}
})
```
## 3.在组件中使用vuex的数据
```
<div class="button">{{this.$store.state.city}}</div>
```
## vuex调试查看位置
![](https://box.kancloud.cn/c8c501cfdbd34ddcce03537e26b53924_974x498.PNG)