一；概念：在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

二；自己的总结：把需要共享的数据存放到Vuex中，其他的组件可以共同进行操作更改Vuex中的数据，多个组件需要共享数据时使用。

三；如何配置Vuex：

（1）通过npm i vuex 安装vuex插件

（2）创建一个store文件夹，里面再创建一个js文件夹 该文件用于创建Vuex中最为核心的 store

（3）在创建好的文件夹中通过 import引入 vuex 启用 vuex 插件 准备各种必须的配置项：         actions，mutations，state（都为对象）

（4）创建并暴露 store

（5）在入口文件main.js中通过 import 引入创建好的暴露的js文件，

        在 main.js 中创建vm时传入 store 配置项

（6）配置好后 所有的 vc vm 实例对象上都会存在且可以使用的 $store 

// 自行创建的js文件，该文件用于创建Vuex中最为核心的 storeimport Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 启用Vuex插件
Vue.use(Vuex)
// 准备 actions -- 用于响应组件中的动作
// 业务逻辑都写在actions中
const actions = {}
// 准备 mutations -- 用于操作数据（state）
const mutations = {}
// 准备 state -- 用于存储数据
const state = {}// 创建并暴露store
export default new Vuex.Store({actions,mutations,state,
})

四；Vuex原理图：

五；Vue脚手架处理 import 的特点 

Vue脚手架会无视 import 的书写位置 把所有的 import 汇总到一起，先执行import 然后再执行其他的语句

六；如何使用Vuex：

（1）在需要组件中绑定好事件，在事件中通过 this.$store 触发 vuex 上的各种方法

 methods: {increment() {// 如果没有复杂逻辑 store 可以直接调用 commit 从而触发 mutationsthis.$store.commit("JIA", this.n);},decrement() {// 方法接收俩个参数 第一个是命名 第二个是要传的值this.$store.commit("JIAN", this.n);},incrementOdd() {// 如果有复杂逻辑 需要通过 dispatch 触发 actions 在 actions 中书写复杂逻辑this.$store.dispatch("jiaOdd", this.n);},incrementWait() {this.$store.dispatch("jiaWait", this.n);},},

（2）在自己创建的store.js文件夹中 在对应的actions，mutations，state对象中书写逻辑

store，actions，mutations，state详细解释：

1. actions -- 用于响应组件中的动作

以组件绑定的事件方法中 通过 $store.dispatch 绑定的事件名 为 函数名 书写对应函数

actions中书写的函数可以接收到俩个值

第一个值是 context （上下文）它可以访问到 state 中存储的数据 。

第二个值是 value 是组件绑定的方法中 通过$store.dispatch 所传递的值

函数内部通过 context 在触发 commit 方法

commit可以接俩个参数

第一个参数是自定义函数名 为了区分一般都是大写

第二个参数是 value 值 是组件绑定的方法中 通过$store.dispatch 所传递的值

// 准备 actions -- 用于响应组件中的动作
// 业务逻辑都写在actions中
const actions = {jia:function(context,value){context.commit('JIA',value)},jian:function(context,value){context.commit('JIAN',value)},jiaOdd:function(context,value){if(context.state.sum%2){context.commit('JIA',value)}},jiaWait:function(context,value){setTimeout(() => {context.commit('JIA',value)}, 1000);},
}

注意：

（1）commit 方法的自定义函数名为了与 $store.dispatch 所创建的函数名进行区分 一般都是大写的

（2）业务逻辑一般都写在 actions 中

2.mutations -- 用于操作数据（state）

mutations中依然是以函数进行书写 函数名为 在actions中通过 context.commit 所绑定的函数名 为mutations中的函数名 

mutations中的函数可以接收俩个参数

第一个参数：state 里面包含着各种可以操控的数据

第二个参数：value 依然是组件绑定的方法中 通过$store.dispatch 所传递的值

函数体内书写操作数据的各种逻辑

// 准备 mutations -- 用于操作数据（state）
const mutations = {JIA(state,value){state.sum+=value},JIAN(state,value){state.sum-=value}
}

3.state -- 用于存储数据

里面配置 需要共享的数据 所有组件都可以进行读写操作。

// 准备 state -- 用于存储数据
const state = {sum:0
}

注意：

若组件绑定的事件没有复杂逻辑 可以通过 this.$store 直接触发 commit 方法 然后在 store.js文件夹的 mutations 中直接书写逻辑