一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第六天，点击查看活动详情。
前言
我们知道Vue中父组件与子组件之间的传值可通过子组件标签传值+props很容易实现，子传父可通过事件总线或父组件使用子组件的引用ref调用子组件的方法来获取子组件的数据，还有很多方法，这里就不再列举了。但是，兄弟间或者更多层次的传递怎么实现呢？这里笔者将教大家Vuex的基本使用方法去实现。
概念
首先，先跟大家介绍一下Vuex的概念。它是一种在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。我们下面来看一下原理图
我们可以发现VC也就是组件实例一般是经过分发dispatch到Vuex中的actions再commit提交到mutations中最终修改state中的数据。但若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit。空口无凭，下面我们通过一个小案例来理解一下。
搭建环境
1.下载Vuex
npm i vuex
2.创建文件夹与文件src/store/index.js
目录结构：
index.js:
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}
//创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state
})
3.在main.js文件中引入store并在Vue实例中使用
import Vue from 'vue'
import App from './App.vue'
//引入Vuex配置文件store
import store from './store'
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'
Vue.config.productionTip = false
Vue.use(VueRouter)
const vm=new Vue({
render: h => h(App),
store,
router,
}).$mount('#app')
实现
现在比如说我有一个brother1和brother2组件分别都有各自的数据。
brother1.vue:
gameList: ["英雄联盟", "绝地求生", "永劫无间", "Dread Hunger"],
brother2.vue:
peopleList:[
"张三","李四","王五","陆六"
]
现在如果这两个组件的列表要实现共用，我们可以把这两个列表统一保存到store.js文件中的state中。然后现在要展示列表可以在brother1.vue的计算属性中返回state中的数据（brother2同理），也可直接模板中调用（这样若多次使用得重复写大段名称）。
brother1.vue:
computed: {
gameList(){
return this.$store.state.gameList
}
}
这样就完成了读取的操作。
效果：
现在如果我要在brother2中修改brother1的数据，该如何完成呢？
1.我们先在brother2中添加一个按钮绑定事件。
2.在store配置文件中为mutations配置项添加对应函数
brother2.vue:
methods: {
//button按钮绑定事件
changeValue(){
//将其直接提交到store配置项mutations的changeBrother1方法下
this.$store.commit("changeBrother1","Q宠大乐斗")
}
}
store.js:
const mutations= {
//mutations配置项有两个参数state即代理了store下的state，value为外部组件传入的参数
changeBrother1(state,value){
//这里把数组第一项变为我们brother2传入的“Q宠大乐斗”
//注意vue监测数组的变化要凭借数组方法
state.gameList.splice(0,1,value)
}
}
效果：
总结
好了，到这里vuex的基本使用方法我们就说完了，下一期我们将会继续针对vuex来进行一些简化及进阶的操作。
