个人理解：把Vuex当成缓存（Redis）使用（所以应该是在偏中大型的项目中使用）
1.安装Vuex。V2对应的版本是3.x，V3对应的版本是4.x
npm i vuex@3
2.在src目录下新建store/index.js
按照后端的理解：Vuex.Dispatch执行后进入Action相当于进入Service层，进行逻辑处理，然后Vuex.Commit进入Mutations相当于执行Dao层对数据进行更改。
（1）如果没有逻辑需要处理，可以直接调用Vuex.Commit；
（2）如果逻辑太多了，需要拆分模块，开发者A负责处理a逻辑，开发者B负责处理b逻辑，A处理完后，调用Vuex.Dispatch传给B进行处理，逐层传递。
import Vue from "vue";
import Vuex from 'vuex'
// 先使用插件
Vue.use(Vuex)
const actions = {
// context是上下文，value是入参
recordClick(context, value) {
console.log('Store.recordClick ===> ',context, value)
context.commit('RecordClick', value)
}
}
const mutations = {
RecordClick(context, value) {
console.log('Store.RecordClick ===> ',context, value)
context.clickTimes += value
}
}
const state = {
clickTimes: 0
}
const gett
export default new Vuex.Store({
actions,
mutations,
state
})
3.在main.js中配置Vuex
之前使用插件的时候，是在main.js使用的，但是在这里却不能。因为在store/index.js下的配置，在main.js导入的时候优先加载，而正常（如果不这么做，Vue会报错，所以不正常）应该要先让Vue.use(Vuex)先执行，所以只能把使用Vuex插件放到配置的头部，然后再去执行Vuex的配置。
import Vue from 'vue'
import App from './App.vue'
// 导入配置的vuex
import index from "@/store";
const vm = new Vue({
'el': '#app',
render: (createElement) => createElement(App),
// 配置vuex
store: index,
})
4.操作Vuex数据：dispatch,commit（可用第6步代替）
<template>
<div id="app">
<button @click="showHead()">点我</button>
</div>
</template>
<script>
export default {
name: 'App',
methods: {
showHead() {
// 如果在main.js的vm配置的名称是xxx，那么这里就是this.$xxx.dispatch
this.$store.dispatch('recordClick', 1)
// this.$store.commit('RecordClick', 1)
},
},
}
</script>
5.读取Vuex数据：引入mapState,mapGetters
<template>
<div id="app">
<!-- 直接读取Vuex的state变量 -->
<p>{{ $store.state.clickTimes }}</p>
<p>{{ $store.getters.clickTimesDouble }}</p>
<!-- 通过计算属性获取 -->
<p>{{ clickTimes }}</p>
<p>{{ clickTimesDouble }}</p>
</div>
</template>
<script>
import {mapState, mapGetters} from "vuex";
export default {
name: 'App',
computed:{
// a = {a:1,b=2}; a = ...object; ...意思是把object的kv拼接到a
// 注意：读取state,getters的变量时，需要用引号圈住
...mapState({clickTimes:'clickTimes'}),
...mapGetters(['clickTimesDouble']) // 上一行的简写形式
},
}
</script>
6.用 mapActions,mapMutations 代替 dispatch,commit
<template>
<div id="app">
<button @click="showHead()">点我</button>
</div>
</template>
<script>
export default {
name: 'App',
methods: {
...mapActions(['recordClick']),
...mapMutations(['RecordClick']),
showHead() {
// 如果调用mapActions和mapMutations帮我们生成的方法，在h5调用时需要携带入参，@click=recordClick(n)，n为入参
this.recordClick(1)
this.RecordClick(1)
},
},
}
</script>
