Vuex是vue中的一种状态管理模式，就是一个 状态仓库，仓库做什么？存储状态、管理状态（数据）的变化、提供状态获取窗口。
本文中一些测试用例基于@vue/composition-api@1.7.1，vuex@3.6.2， vue@2.6.10 做的验证。Vue3和 vuex@4.x用法有所不同。
2.mutations对应及时同步更新仓库数据，对应 store实例的.commit方法
3.actions对应异步延时更新数据，对应store实例 的.dispatch方法。
6.针对有命名空间模块，采用 “命名空间名（modules下挂接的属性名）/ ” 进行使用。
6.支持常量类型。为了让大家都清楚，提供了哪些mutation,action, 独立一个 _types ，在types中定义好类型名字，做store 的配置时，直接使用 [_types.XXX]
7.针对state\ 非函数式getter，数据会进行缓存。
针对Vue3组合式，对应Vuex4.x 版本， 其使用方式方法有所不同， 产生 store 用CreateStore, 示例使用 app.use(store)，不是属性挂接，使用 useStore。
使用compostion-api时，直接引入 利用 store.js 中生成的 store 示例，不绑定到vue上，也可直接使用。
PS: Vue.use(Vuex)不能省略，否则出现错误 must call Vue.use(Vuex) before creating a store instance.
具体用法vue2 + vuex + compostion-api
针对不采用compositon-api的，利用 mapXXX在对应属性上映射即可，方便快捷。
安装背负(Vue.use(Vuex)) -> 指腹为婚(new Vue({store: new Vuex.Store({}) })) -> 开支散叶 (...mapXXX)
//传字符串参数 'count' 等同于 `state => state.count`
//为了能够使用 `this` 获取局部状态，必须使用常规函数
return state.count + this.localCount
'increment', //将 `this.increment()` 映射为 `this.$store.commit('increment')`
'incrementBy' //将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
add: 'increment' //将 `this.add()` 映射为 `this.$store.commit('increment')`
add: 'add' //将 `this.add()` 映射为 `this.$store.dispatch('add')`
不做映射使用this.$store访问， 而composition-api 比较类似这种做法。
import app from "./modules/app"
import calc from "./modules/calc"
Vue.use(Vuex) //必须在 new Vuex.Store 之前
const store = new Vuex.Store({
//这里启用了模块，注意：启用了模块管理于根root上配置不冲突
//为方便 mutation actions 的 外部使用，可使用 动态属性名
// namespaced: true, //启用命名空间后， getter 直接通过 store 实例对象是无法直接通过 store.getter获取到的
getMoreUseAttr(state, getters){
getMoreUseMethod: state => more => { //函数式getter， 在使用时 函数调用
mutations: { //加工、维护。只能同步。 为方便
//外部使用 .commit(mutationName, playload) 或者对象方式 {type, ...payload}
return new Promise((resolve, reject) => {
commit({type: "increment", ...payload})
启用命名空间后，getter直接通过 store 实例对象是无法直接通过 store.getter获取到的
increment(state, payload){ //注意，这是与app配置中重名的。
root: true, //注意，这是与app配置中重名的。并提升到root根级
new Promise((resolve, reject) => {
context.commit("increment", payload)
在启用命名空间的情况，mutation或 action 也可使用 root: true 的方式提升到根级root上。
当多个模块有重名mutation或 actions 时， 如果启用命名空间，则互不关系，访问时指定命名空间，如果未启用命名空间或提升到了根级，在访问时，所有同名的都会被调用。
Vue.config.productionTip = false
import store from "./components/store/index.js"
render: function (h) { return h(App) },
状态值维护组件：/components/vuex/index.vue
import {onMounted, ref, computed, getCurrentInstance} from "@vue/composition-api"
import store from "./store/store.js"
store.commit("increment", {count: 2})
store.commit("calc/increment", {count: 5})
const asynChangeData = () => {
store.dispatch("addAsync", {count: 10}, { root: true })
const more = computed(() => store.getters.getMoreUseAttr)
changeData, asynChangeData, asynChangePowerData, more
状态值接收组件/components/vuex/comp1.vue
状态值app.count: {{count}} calc.count: {{count1}}
import {onMounted, ref, toRefs} from "@vue/composition-api"
import store from "./store/store.js"
const {count} = toRefs(st.state.app)
const {count: count1} = toRefs(st.state.calc)
import vuexIndex from "./components/vuex/index.vue"
import vuexcomp1 from "./components/vuex/comp1.vue"
官网地址：https://vuex.vuejs.org/zh/
vuex, store, state, mutations, actions, getters;
