Vue2（十二）：Vuex环境搭建、Vuex工作原理、Vuex开发者工具、几个配置项、多组件共享数据、Vuex模块化

一、Vuex

1.概念

专门在Vue中实现集中式状态（数据）管理的一个Vue插件（use引入），对vue应用中多个组件的共享状态进行集中式的管理（读／写），也是一种组件间通信的方式，且适用于任意组件间通信。”

多组件比如a、b、c、d进行事件共享的时候，都想要a里的数据，而且他们互为兄弟，按以前的方法就得用全局事件总线，但是那样的话组件就太多了。Vuex就专门解决共享数据的问题。单独放在一块区域，大家都想得到的数据就放它里面，大家都可以读、写，a改完之后的x=4，那么b在拿到x也是4。

2.什么时候使用Vuex

（1）多个组件依赖于同一状态
（2）来自不同组件的行为需要变更同一状态

3.求和案例：纯Vue版

<template>
 <div>
   <h2>当前求和为：{
  {sum}}</h2>
   <select v-model.number="n">
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <!-- 这里除了最开始设置的数字1，其他都是字符串所以都加不了了 -->
     <!-- 所以加 ：value，当成js表达式去解析 或者加.number强制转换-->
   </select>
   <button @click="increment">+</button>
   <button @click="decrement">-</button>
   <button @click="incrementOdd">当前求和为奇数再加</button>
   <button @click="incrementWait">等一等再加</button>
 </div>
</template>

<script>
export default {
  name: "myCount",
  data(){
    return {
      sum:0,
      n:1,//用户选择的数字
    }
  },
  methods:{
    increment(){
      this.sum+=this.n
    },
    decrement(){
      this.sum-=this.n
    },
    incrementOdd(){
      if(this.sum%2==1)
      {
        this.sum+=this.n
      }
    },
    incrementWait(){
      setTimeout(()=>{
        this.sum+=this.n
      },500)
    }
  }
};
</script>

4.Vuex的工作原理图

（1）构成

构成Vuex的三个对象由store管理，而且这三个对象数据类型都是obj，dispatch、commit函数就是store里的，所以我们得让任何vc都能看见store。

（2）流程

Vue Components是组件们，比如说我要加2，然后这个数据传给dispatch函数，传参过去：第一个参数：你要做的动作，第二个参数：数字。

然后你写的函数在Actions（数据类型是Object）就会有一个函数跟它对应，然后你自己再去调用commit函数（提交），到了mutations（数据类型也是Object），commit里的jia，mutations也会有一个jia跟它对应，同时它还会拿到两个参数：state状态和2。

mutate不用你调用，只需要在mutations里的jia写一句state.sum+=2，底层自动加2，sum就不是0是2了，然后Vuex帮你开始渲染render，页面上的sum就变化了。

这样看起来好像Actions有点没用，但是上面是后端接口，因为有的时候给dispatch传只传了动作没有值，就得去后端问一下数据（值得要发送ajax请求才能得到的时候，就需要用到Actions了）。

如果传过来就有值的话，可以直接调用commit。

二、Vuex环境搭建

1.安装Vuex

npm i vuex@3，Vue2对应vuex3版本，Vue3对应vuex4版本

2.引入并Use一下vuex

import Vuex from 'Vuex'
Vue.use(Vuex)

use了vuex然后就可以在vm中创建store对象了

3.创建store

新建一个store文件夹，在里面新建一个index.js

注意：所有的import都是先被提到代码最上方先执行然后再执行其他代码

在main.js引入插件并use vuex插件必须在import store之前，所以在main里面不管把use怎么移动都是先import store会报错，干脆把use代码写在index.js里，index里没有vue就引入vue

main.js:

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false
import store from './store/index.js'
//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus=this
	},
	store
})

index.js:

//该文件用于创建Vuex中最核心的store
//actions——响应组件中的动作
//引入Vue
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const actions={

}
//mutations——用于操作