Vuex的简单用法

前提声明

这篇文章是描述了vuex的基本用法，不包含该插件过深的内容

---

基础知识

初用vuex，一般是看重其声明的变量如果注册到根组件便可以在全组件中获取的特性，这篇文章就侧重如何使用vuex。

//先声明一个store，我默认在store.js文件中建立，因为我的目的是将其引入根组件
//中，使其可以全局使用
export default new Vuex.Store({
  	state,
	mutations,
	getters
})

这里面有三个对象分别是 state、mutations、getters

• state: 我将称之为 变量区，因为们要声明的变量的对象都是在这里面声明的。
• mutation:我称之为方法区，这里面放置的是我们声明的方法。声明的方法一般是修改state属性的
• getters:我称之为变量获取区，这里面是是对变量区数据的获取。

---

定义方式

理解之后，将上面的代码扩充一下变为

const state = {
	msg : '测试'	//可以理解为 定义全局变量
}
const mutations = {
	setMsg : function(state,msg){	//可以理解为对全局变量的修改
		state.msg = msg				//可以加一些修饰
	}
}
const getters = {
	msg : state =>{
		return state.msg			//可以理解为 获取这个群居的变量
	}
}
export default new Vuex.Store({
  	state,
	mutations,
	getters
})

---

调用方式

这里面的东西的调用非常简单，当这个Vuex.Store实例被挂载到根组件上是，在任意组件中通过

var msg = this.$store.getters.msg //获取msg

//修改方式比较特殊 通过commit()显式修改
this.$store.commit('setMsg','修改了')
//'修改了'默认是指 setMsg的第二参数，因为第一个参数vue有默认的属性