#### 写在最前面！还是要去vuex官网看原来的解释
地址在此，会使用的就直接去看官网吧。
```javascript
https://vuex.vuejs.org/zh/
```
这个图很是直观地解释了这个vuex的原理。
Ok，那我们接下来先说如何使用。
### vuex的使用
#### 步骤1 安装
```javascript
cnpm install vuex --save
```
#### 步骤2 引入
首先，根据vuex官网推荐的项目结构，我们新建store文件夹，以及相应的文件
> 授人以鱼不如授人以渔
我们在这里就只写一部分简单的使用，模块化的等读者自己摸索
**我们在store.js中写入下面代码，代码对应的有注释**
```javascript
//引入vue和Vuex
import Vue from 'vue'
import Vuex from 'vuex'
//引入之后，对vuex进行引用
Vue.use(Vuex)
//创建且声明一个对象
export const store = new Vuex.Store({
state: {
isShow: true,
items: [
{
name: "张三",
num: "1"
},
{
name: "李四",
num: "2"
},
{
name: "王五",
num: "3"
}
]
},
// // 2. getters
getters:{
// 参数列表state指的是state数据
getitemsFn(state){
return state.items;
}
},
// 3. actions
// 通常跟api接口打交道
actions:{
// 设置城市信息
// 参数列表：{commit, state}
// state指的是state数据
// commit调用mutations的方法
// name就是调用此方法时要传的参数
setCityName({commit,state}, name){
// 跟后台打交道
// 调用mutaions里面的方法
commit("setCity", name);
}
},
// 4. mutations
mutations:{
// state指的是state的数据
// name传递过来的数据
setCity(state, name){
state.items = name;//将传参设置给state的city
}
}
})
```
**在main.js中代码**
```javascript
import { store } from './store/store'
```
```javascript
new Vue({
store: store,//使用store
el: '#app',
router,
components: { App },
template: '<App/>'
})
```
#### 步骤3 在页面中使用
**我们在一个组件页面中使用**
```javascript
methods: {
backFn: function (index) {
// 调用vuex的ations设置城市的值
this.$store.dispatch('setCityName', this.cityArr)
console.log('itemList', this.itemList)
},
},
computed: {
itemList() {
return this.$store.state.items
},
},
```
html展示部分
```javascript
<p v-for="item,index in itemList"
:key="item.num">
<span @click="backFn(index)">
{{item.num}}{{item.name}}
</span>
</p>```
#### 步骤 4 我们看下效果
**原页面**
**点击过后**
网友评论