做着做着的时候，单个页面也好，总会遇到重复利用，需要全局操作运算的变量，这时候引入官方推荐核心组件 VUEX，其实是为了优化前面几点不方便也好，找个理由引用下，不然怎么扯下去
扯扯基本操作
官方提及 3个点，主要是state、view、actions --> 传送-不重复了
最终是围绕着store这个对象来操作，其他暂且可以撇开，我们关心的是如何去取值，如何去更新即可。
①上来就是模块化
不讨论那个最简单的store，只要是业务线的，基本用不着那个，所以直接奔模块化
官方提及的方法：
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态优化的方法：
单个js内进行分离还不能很好的解决，但是最起码是一个简单的思路，我们可以进行再次切分，切分到数个js'内，再进行引用，按需引用
关键：
1、默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的 ,因此我们可以单独把getter提取出来
2、这里涉及的getter、state 内容都是只读的
创建一个文件夹：store，将模块A、B，分别放置到 store/modules/moduleA 、store/modules/moduleB，再创建一个index.js 用以整合模块，统一输出。（默认取文件的时候，如果选取文件夹，则会指向index）//moduleA
const moduleA = {
state: { ...,a },
mutations: { ... },
actions: { ... }
}
export default moduleA;//moduleB
const moduleB = {
state: { ...,b },
mutations: { ... },
actions: { ... }
}
export default moduleB;//getters //纯粹不想改名，跟着文档的名称，自动适配多好
const getters = {
a: state =>state.moduleA.a,
b: state =>state.moduleB.b,
...
};
export default getters
//index
import Vue from 'vue'
import Vuex from 'vuex'
import moduleA from './modules/moduleA'
import moduleB from './modules/moduleB'
import getters from './getters'
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
moduleA,
moduleB
},
getters
});
export default store
这样子就能更好的去相对区分所需的模块，整理，当然你也可以考虑使用动态加载的方式
如果需要，也可以延迟加载：
官方中提及的： 在 store 创建之后，可以使用 `store.registerModule` 方法注册模块 ,这里基本可以用延迟加载的方式，如果想用
import('./store/modules/moduleA').then(moduleA => {
store.registerModule('moduleA', moduleA)
})②日常所需操作
其实 api 里面宝典都有，但是就事论事，我还是说说常用的
关于state：
关于state的获取，也就是每个Vuex模块基础的状态参数，
①通常在组件中获取
//当然要引入，如官方示例即可，如果需要也可以自定义昵称
//mapGetters 是一个辅助函数，数组内容，故...
import { mapGetters } from "vuex";
//normal
computed: {
...mapGetters(['a'])
},
//自定义名称 ,多个情况下，用逗号分开
computed: {
...mapGetters({a:'a'})
},
②组件外
//组件外通过store.state.x (x代表欲获取的值即可)
import store from './store' //参照上述相对位置
//方式一
store.getters.a
//方式二
store.state.a③（题外）如果不用模块的话
//mapState 辅助函数是很好的，如果不是模块化的话，也是可以与getter这样操作，但是有模块的话就没有这么方便，所以就不用了
computed: {
//因为默认是state.a,与子节点相同
...mapState(['a'])
},
//虽然可以这样，但是这样就已经跟getters达成的一个样了，不舒服，自定义来说，还是getters好用
computed: ({
a: state => state.moduleA.a
})修改state:
state获取出来是只读的，getter拉出来也是，所以学着官方文档， 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation （别在这里写异步函数，需要异步函数则看下一个小节点）
例如 moduleA 内增加一条
mutations: {
//当然此处定义名称建议参照官方所述，利用es5风格进行变量命名，有助于统一管理
increment (state,param) {
// 变更状态
state.a += param
}
}①不需要返回值的话
store.commit('increment',1)
其中 1作为额外的参数，称之为载荷，也当且仅能一个，就能在定义的mutation内修改所需修改的state参数②可返回promise
//那就需要中间加多一层action，但凡不发生异常，都是成功
//默认
needCount({commit, state}, addNumber) {
store.commit('increment',addNumber)
}
//也可以自定义
needCount({commit, state}, addNumber) {
retrun new Promise((resolve, reject) => {
if(addNumber>0) {
store.commit('increment',addNumber)
resolve()
}else{
reject()
}
}
//=========官方的这个异步实例也是有点意思，可以学习一下==========
// 假设 getData() 和 getOtherData() 返回的是 Promise，一个 store.dispatch 在不同模块中可以触发多个 //action 函数。在这种情况下，只有当所有触发函数完成后，返回的 Promise 才会执行。
actions: {
async actionA ({ commit }) {
commit('gotData', await getData())
},
async actionB ({ dispatch, commit }) {
await dispatch('actionA') // 等待 actionA 完成
commit('gotOtherData', await getOtherData())
}
}方法调用：
//一般调用
store.dispatch("needCount")
//辅助函数调用
//将this.needCount() 映射为 this.$store.dispatch('needCount')
methods: {
...mapActions(["needCount"]}
}
//当然也有自定义名称，其实三者的辅助函数都可以这样玩,然后继续逗号分割
methods: {
...mapActions({
custom_needCount : "needCount"
})
}③额外谈谈mutations/actions
根据官方文档所述，为了使得状态可追踪，在mutation中只用来更改状态，若需要api请求等异步操作，还是划分到action中提交mutation来进行调用 mutation，避免状态值在特定情况下出现乱子。
当然调用的话，你也可以在mutations里调用多个mutation，是一样可行的。