初识——vuex

在main.js中引用vuex

import Vuex  from “vuex”
vue.use(Vuex)
const  store = new Vuex.Store({
})//Store首字母大写

store中有四个属性： state 、getters、mutations、actions、modules；
state
存放需要管理的数据。
格式为：

state:{
data1:"",
data2:[],
data3:{}
}

在组件中使用数据需要这个样子：

this.$store.state.data1.....

getter:据说可以当成计算属性computed去理解！！！！！
不过其中的其中的计算函数要用到state的数据时，需要传参。
格式为：

getters:{
	fn(state){   state.data1.   todo....},
	}

在组件中使用格式为

this.$store.getters.fn //就可以拿到main.js中的计算属性了。

mutations据说这各可以当成方法methods来理解。
使用格式为

mutations: {
	fn2(state, payload){  
	state.data2.
	todo ....
	 }//state为上面公用的数据。payload为自定义参数。是引用改方法时需要传的参数。
}

在组件中使用格式：

this.$store.commit("fn2",222)//其中“fn2”为main.js定义的mutations方法名。222是方法中对应的参数payload。

actions这个有点不厉害。可以理解为，mutations的下级。想要想state禀告一点事情，必须通过mutations，不然不行，也就是调用mutations中的方法。
使用格式：

actions:{
	fn21(context,payload){
		context.commit(fn2, payload)
	}//看见没？完全就是调用mutations的函数。和在组件中调用mutations的函数一样，就是把 this.$store变成了context。
	//气人不？要他干啥？传话筒！！！它的作用就是传话筒，用来处理异步函数，mutations要和state上下一心，不能处理异步。
}

组件中的使用方法：

//使用actions方法：
this.$store.dispatch("fn21",payload);
//使用mutations方法：
this.$store.commit("fn2",payload);

小结：

	在组件中使用所有的属性都要**以this.$store开头。**
	使用state中的数据都需要引用state；不管是在组件还是main.js中，都需要。
	在组件中使用getters方法 this.$store.getters.
	使用mutations的方法用：commit---this.$store.commit() 
		  在actions中调用也是使用commit---context.commit()   
	使用actions的方法用：dispatch----this.$store.dispatch()

趣味总结：
state相当于皇帝：
getters相当于史官：
mutations相当于在朝大臣：
actions相当于小县官：
modules相当于各个部门。
史官自动的改写皇帝的记录，
在朝大臣则通知皇帝改写数据，
小县官只能通过在朝大臣来通知皇帝改数据，
数据太多，有点乱，所以就分出来各个部分来分化数据了

最后一个modules:
模块儿：当数据较多是，都放到state里面会比较繁杂，故而来个modules来分崩离析一下。
用法：

let   moduleA={
		state:{   }，
		getters: {  },
		mutations:{   },
		actions:{  }
}
let   moduleB={
		state:{   }，
		getters: {  },
		mutations:{   },
		actions:{  }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

在组件中的使用格式为**：哈哈还没有完全的搞清楚。。。。**

等我搞清楚，搞明白了，再来写！

搞明白了，传送门再识vuex–modules