关于vuex的个人见解

vuex包括五大核心配置项：state、getters、mutations、actions、modules
state：唯一数据源
getters：和Vue对象的computed配置项的用法一样，一般用于处理需要大量计算的属性

import Vue from 'vue'
import Vuex from 'vuex'

export default const store = new Vuex({
	state: {
		name: 'zhangsan'
	},
	getters: {
		//getters内的函数接受一个必选参数，指向唯一数据源state
		nameUpper: state => state.name.toUpperCase() //ZHANGSAN
	}
})

mutatios：纯函数组成的对象，只有通过commit来提交mutatios内的纯函数去变更state数据，才能被vue的响应式系统所侦听到

import Vue from 'vue'
import Vuex from 'vuex'

export default const store = new Vuex({
	state: {
		name: 'zhangsan'
	},
	mutations: {
		//mutations内的纯函数接收必选参数state——指向唯一数据源；一个可选参数payLoad——用于接受负载，一般是commit提交action时额外传输的数据
		changeName: (state,payLoad) => {
			state.name = 'lisi'
		}
	}
})

actions：这一配置项主要是为了处理异步

modules：如果将所有的共享数据都放入state内，state不免会过于臃肿，导致状态库难以维护，modules适用于将状态库细化而来的配置项，每个module都拥有自己的state、getters、mutations、actions甚至于modules

import Vue from 'vue'
import Vuex from 'vuex'

export default const store = new Vuex({
	state: {	//根state
		name: 'zhangsan'
	},
	modules: {
		
		moduleA: {
			state: {},
			//注意，这里getters、mutatios等内的函数接收的state是局部的state，不是根state
			getters: {},
			mutatios: {},
			actions: {},
			modules: {}
		},
		moduleB: {
			state: {},
			getters: {},
			mutatios: {},
			modules: {}
		},
	}
})

Veux设计思想——单一数据流

Devtools是vue提供的一个浏览器插件，用于观测状态库的变化

vuex的设计过程很大程度的参考了redux，在视图内使用dispatch触发action，通过action来执行mutation纯函数，进而去变更唯一数据源state，最终导致视图的重新渲染。