vuex的基本使用

1. 引入模块并定义相关操作
   store.js

import Vue from "vue"
import Vuex from "vuex";
vue.use(vuex)
const state = {     // 需要存储的状态变量
	count: 0,
	....
}
const mutations = {   // 必须是同步，修改state中的数据
	setCountInMutations(state,val){
		state.count = val
	}
}
const actions = {   // 多用于异步操作，通过mutations修改state中的数据
	setCountInActions(store,val){
		setTimeout(()=>{
			store.commit("setCountInMutations",val)
		}, 0)
	}
}
const getters = {   // 在此可对数据进行一些预处理（格式化）返回到使用的地方
	getCount(state) {
		return state.count+1
	}
}
const store = new Vuex.store  {
	state,
	mutations,
	actions,
	getters
}
export default store

2. 挂载到vue实例上
   main.js

import Vue from "vue";
import store from "store.js";
new Vue({
	el: "#app",
	render: h=>h(App)
	store: store,
	...
})

3. 在组件中操作Vuex中的数据
   app.vue

methods: {
	changeCount(){
		console.log(this.$store.state.count);
		console.log(this.$store.getters.getCount);
		this.$store.commit("setCountInMutations", 2);
		this.$store.dispatch("setCountInActions",3);
	}
}