vuex辅助函数用法

Vuex是实现组件全局状态（数据）管理的一种机制，vuex的出现是为了解决web组件化开发的过程中，各组件之间传值复杂和混乱的问题。
使用vuex统一管理状态的好处：
1.能够在vuex中集中管理共享的数据，便于开发和后期进行维护
2.能够高效的实现组件之间的数据共享，提高开发效率
3.存储在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新

1. 将想要全局存储的数据存放在state中
state: {
		vuex_user:{
			name:'oange',
			age: 16,
		}
	},

2. 只有Mutation才有权利修改state中的数据，但是只能包含同步的操作
/* payload载荷 */
	mutations: {
		Muser(state,payload) {
			// state.vuex_user[name] = 'payload';
			Vue.set(state.vuex_user,'name',payload)
		}
	},

3. Action是处理异步操作的，也可以改变store中的数据，不过需要通过mutation
/* context 上下文 */
	actions: {
		Auser(context,payload) {
			// 模拟异步操作	
			setTimeout(()=>{
				context.commit('Muser')
			},1500)
			
		}

	},

4. Getter对Store中的数据进行加工处理形成新的数据，它只会包装Store中保存的数据，若state中的数据需要经过处理，然后再显示到页面的情况，可以在此处进行处理
getters:{

	}

使用方式，以index.vue为例。
import { mapState, mapMutations, mapActions } from 'vuex';

// 映射 this.vuex_user为 store.state.vuex_user
computed:{ ...mapState(['vuex_user']) },

methods: {
			// 将 this.Muser() 映射为 this.$store.commit('Muser')
			...mapMutations(['Muser']),
			// 将 this.Auser() 映射为 this.$store.dispatch('Auser')
			...mapActions(['Auser']),
		},

若要使用，直接加this使用即可，例
this.vuex_user
this.Muser()
this.Auser()

PS：由于偏爱辅助函数的写法，故此处不对其他写法做过多解释，详情见官网。