关于Vuex的理解和使用，全局共享数据

什么是Vuex？

Vuex是一个全局共享数据的区域，相当于一个数据仓库；
Vuex是为了保存 组件之间共享数据而诞生的，如果组件之间 有要共享的数据，可以直接挂载到Vuex上，而不必通过父子之间的传值；私密的数据不需要放在Vuex上，只有共享的数据才有必要放在Vuex上；

标题安装Vue？

cnpm i vuex -S
import Vuex from 'vuex'
Vue.use(Vuex)
new Vuex.store()  // 创建一个实例，得到一个数据仓库对象，如下
var store = new Vuex.store({
	state: {},    // 相当于vue 中的 data，专门用来存储数据
	mutations: {}   // 相当于vue 中的 methods
})
store:store  // 在 vue 事例中挂载一下，名字一样 可以直接写成 store

在组件中使用stroe

this.$store.state.XXXX     // 这个只能访问 state 里面的数据

为什么不推荐直接操作state 的方法来传递数据？

这样做可能会导致数据的紊乱，又不能查找出来是谁操作数据出现了紊乱。

所以使用 mutations(中间件) 中的方法来间接操作数据(同步)

state: {
	count:0
}
mutations: {
	add(state) {   // 这个里面的参数 最多 只能传两个参数，第二个可以是自己给的参数
		state.count++
	}
}
this.$store.commit('add')

什么是getters？

getters 和 state，mutations平级，他和vue中过滤器一样都不修改数据，只是给数据做了一层包装
getters: {
	potCount: function(state) {   // 谁调用它，就直接返回的是他return 后包装的结果
		return '这个数据是：' + state.count  // 这个数据是双向绑定的，改变之后也会跟着改变
	}
}
// 调用 getters 
$store.getters.optCount

action异步函数请求？(异步)

1，this.$store.dispatch(‘函数名’)   // '函数名指 action中的异步函数名'
	要修改数据则要在异步函数中触发mutations中的函数：context.commit(‘函数名’)
	携带参数：this.$store.dispatch(‘函数名’, 参数)
2，导入vuex中的mapActions函数，将指定的action函数映射为当前组件的methods函数：
	…mapActions([‘函数名’])
	携带参数:在调用时传参即可
3，action也可以操作mutation

Module分割模块

Module是store分割的模块，每个模块拥有自己的state、getters、mutations、actions。

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 的状态

总结

1，获取数据使用 this.$store.state.XXXX
2，改变数据使用 mutations
3，包装数据使用 getters
4，可以通过mapState辅助函数将state和getters映射到当前组件的computed计算属性当中，获取数据，并且通过计算属性返回给组件使用。
5，一些复用的ajax请求可以写在vuex的action中，用promise包装并用async await处理返回的数据，用于处理异步任务。异步方法必须有一个参数rootState，代表当前store实例对象
6，modules 模块划分，Module是store分割的模块，每个模块拥有自己的state、getters、mutations、actions。