Vuex基础核心概念State,Mutations,Actions,Getters,Modules

Vuex 是专为vue.js设计的全局状态管理工具。集中管理检测组件（数据）的状态变化，实现全局状态下的数据共享，高效实现组件之间的数据通信，存储在Vuex中的数据都是响应式的，也就是说当Vuex中的数据发生改变的时候，调用该数据的组件也会同步发生变化。

vue组件之间通信：

父传子：通过v-bind绑定
子传父：通过v-on绑定方法
兄弟组件通信：通过定义一个evenBus事件总线进行通信

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use('Vuex')
const store = new Vuex.store({
	state:{},
	mutation:{},
	action:{},
	getter:{}
})
// 在main.js文件中进行挂载：
new Vue({
	el:"#app",
	render:h=>h(app),
	store
})

将创建的共享数据对象，挂载到Vue实例中，所有的组件可以从store中获取全局的数据。

Vuex核心内容：State，Mutations，Actions，Getters，Modules

State：公共数据源，存放全局共享的数据。

调用方法：
1、this.$store.State.数据名称；
2、按需引入mapstate
import { mapState } from ‘vuex’
定义计算属性
computed:{
…mapState([数据名称])
}

Mutations:唯一合理修改state中数据。

在store.js中：

mutations:{
	add(state){
		state.count++
	}
}

定义一个add方法，在组件中通过mutation调用这个方法，变更state中count的值；
触发方法：
1、在组件方法中：

methods:{
	handle(){
		this.$store.commit('add')
	}
}

通过commit调用某个mutation
调用方法时可以携带参数
2、按需导入mapMutations
import { mapMutations } from ‘Vuex’
在方法中定义
methods:{
…mapMutations([‘add’])
}
需要注意的是Mutation中不能写异步代码！

使用常量代替Mutation类型
创建：mutation-types.js文件
写入：export const Some_MUTATION = ‘SOME_MUTATIONN’
从Types中取用：import * as types from ‘mutation-types.js文件路径’

Actions：异步数据操作

异步操作数据在Action中，但是还是需要通过触发Mutation的方法间接变更数据。
在Mutations中写入函数add（）

mutations:{
	add(state){
		state.count++
	}
}
在Action中进行异步操作调用Mutations中函数：
actions:{
	addAsync(context){
		context.commit('add')
	}
}

触发actions
1、this.$state.dispatch(‘addAsync’).context.commit(‘add’)
2、import { mapAction } from ‘vuex’
methods:{
…mapAction(‘addAsync’)
}

Getters:包装不修改state中数据

state中数据发生变化时，Getters的数据也跟着变化。
调用方法：
1、this.$store.getters.名称
2、import{ mapGetters } from Vuex

Modules：store分模块

当一个项目非常大的情况下，我们可以将store进行分模块处理，每个模块有自己的State，Actions，Mutations，Getters

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}
const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }，
   getters: { ... }
}
const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态