一、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——用于操作数据
const mutations={
}
//state——用于存储数据
const state={
}
//创建store还得向外暴露
const store= new Vuex.Store({
actions,
mutations,
state
})
export default store4.求和案例：Vuex版本
（1）首先把sum放进vuex
//state——用于存储数据
const state = {
sum: 0,
}（2）插值语法
<h2>当前求和为：{{$store.state.sum}}</h2>（3）在组件中的回调用dispatch发给actions
methods:{
increment(){
this.$store.dispatch('jia',this.n)
// $store是在vc身上的
},（4）actions来接数据，再调用commit函数
const actions = {
jia(context,value) {
context.commit('JIA',value)
//context就是一个mini版的store
// 调用commit函数，传过去方法和值
}
}（5）mutations来接数据
我们不是说actions里的东西要想用就得保证mutations里面也得有吗，所以写完actions里的东西之后在mutations里也加上，为了区分mutations里面都用大写
//mutations——用于操作数据
const mutations = {
JIA(state,value) {
state.sum+=value
}
}我们写的state里面只有一个sum=0，但是如果输出一下就能发现实际上还有getter和setter之类的，是vue给我们封装的，类似data
基础版index：
const actions = {
// jia(context,value) {
// context.commit('JIA',value)
// //context就是一个mini版的store
// // 调用commit函数，传过去方法和值
// },
// jian(context,value) {
// context.commit('JIAN',value)
// },
//这两个都没必要绕弯再去找mutations，直接去找
jiaOdd(context,value) {
if(context.state.sum%2)
{
context.commit('JIA',value)
//这儿不用写JIAODD因为调用的都是jia，然后下面也就不用加JIAODD了
}
},
jiaWait(context,value) {
setTimeout(()=>{
context.commit('JIA',value)
},500)
},
}
//mutations——用于操作数据
const mutations = {
JIA(state,value) {
state.sum+=value
},
JIAN(state,value) {
state.sum-=value
}
}基础版myCount：
methods: {
increment() {
//this.$store.dispatch("jia", this.n);
this.$store.commit("JIA", this.n);
// $store是在vc身上的
},
decrement() {
//this.$store.dispatch("jian", this.n);
this.$store.commit("JIAN", this.n);
//直接去找mutations
},
incrementOdd() {
this.$store.dispatch("jiaOdd", this.n);
},
incrementWait() {
this.$store.dispatch("jiaWait", this.n);
},
},
};注意点：1.JIAODD、JIAWAIT里的方法都是JIA不用再单独写一个
2.JIA、JIAN都可以省略找Actions，直接去找Mutations
3.如果在actions直接写context.state.num+=value也能奏效，不用再找Mutations，但是！！这样开发者工具就失效了，所以还是得按照标准写。
4.业务逻辑写在组件里不写在action行不行？拿发票报销举例子，在组件里写就是调用第一个地儿然后传单号，然后调用第、、、个地儿再传单号很麻烦，直接告诉actions我要报销然后传单号，剩下的事让actions去解决。
三、Vuex开发者工具
跟vue位置一样，像表一样的图案就是Vuex的开发者工具，每一栏操作的后面有三个按钮，第一个按钮下载一样的是点击哪个，这个和它所有之前的都合并作为基底
第二个按钮是取消某一层，而且取消之后它后面的那些层也就都没了，就像盖楼一样，三层塌了上面的都得没
第三个按钮是时光穿梭到某个时候，展示那个时候的数据
哪条最绿说明页面正在呈现哪层
展示栏的右上角是导出和导入操作步骤
四、配置项
1.getters配置项
1、概念：当state中的数据需要经过加工后再使用时，可以使用getters加工，类似Vue中的计算属性computed与data。
2、类似于计算属性，但是好多组件都可以用，computer属性只能当前属性用（逻辑复杂或者逻辑还想复用的时候就用getters，得写返回值）
//用于将state的数据进行加工
const getters={
bigSum(state){
return state.sum*10
}
}配置完记得暴露，调用一下：
<h2>当前和乘十为：{{ $store.getters.bigSum }}</h2>2.mapstate与mapGetters
（1）mapstate
当我用插值语法用index中state中的数据的时候，都还得写$store.state、、、，写多了很麻烦，vuex为我们准备了一个方法：
首先先引入：
import {mapState} from 'vuex'computed: {
...mapState({ sum: "sum", school: "school", subject: "subject" }),
},...是es6语法，因为mapState也是一个对象，不能{ }里面再直接套一个对象{},又不是插值语法，...最后再加逗号，里面第一个是上面div要用的，第二个是index里的命名，自动就给你补齐$store.state了，然后在div里直接用：
<h2>我在{{ school }}里学习{{ subject }}</h2>a:a才能简写为a，但是num：‘num’不能简写（对象写法不能简写）
但是数组方法可以简写：注意：这是前后两个名字相同的情况下！！
一个名字两个用途，既可以用在index，也可以用在myCount组件
...mapState(['sum','school', 'subject' ]),（2）mapGetters
用法一样
...mapGetters(['bigSum ' ]),
//...mapGetters({bigSum='bigSum'}),3.mapActions与mapMutations
(1)mapMutations
借助mapMutations生成对应的方法，方法中会调用commit去联系Mutations
methods: {
// increment() {
// //this.$store.dispatch("jia", this.n);
// this.$store.commit("JIA", this.n);
// // $store是在vc身上的
// },
// decrement() {
// //this.$store.dispatch("jian", this.n);
// this.$store.commit("JIAN", this.n);
// //直接去找mutations
// },
...mapMutations({increment:'JIA',decrement:'JIAN'}),但是这么写还有点问题，确实被调用了，但是没有告诉人家n是多少，人家就默认传过去的value是鼠标点击事件，所以调用函数的时候得把n传过去
<button @click="increment(n)">+</button>
<button @click="decrement(n)">-</button>(2)mapActions
借助mapActions生成对应的方法，方法中会调用dispatch去联系Actions
// incrementOdd() {
// this.$store.dispatch("jiaOdd", this.n);
// },
// incrementWait() {
// this.$store.dispatch("jiaWait", this.n);
// },
...mapActions({ incrementOdd: "jiaOdd", incrementWait: "jiaWait" }),
