vuex简单易懂

新建vuex实例

// store.js
import Vuex from 'vuex'
const store = new Vuex.Store({ 

})
export default store

入口文件中引入

// main.js
import store from './store.js'
new Vue({
	el: '#app',
	store,
	.
	.
	.
})

State

用来存放需要保存的数据，其中存放的数据在页面中通过this.$store.state.xxx来获取

// store.js
const store = new Vuex.Store({ 
	state: {
		count: 1
	}
})

Getters

相当于vue中的computed计算属性，它的返回值会根据所依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，其中存放的数据在页面中通过this.$store.getters.xxx来获取

// store.js
const store = new Vuex.Store({ 
	state: {
		count: 1
	},
	getters: { // 类似vue的computed
		getStateCount: function (state) { // 上面定义的state
			return state.count + 1
		}
	}
})

Mutations

这是修改state值的唯一方法，通过commit来提交mutations方法

// store.js
const store = new Vuex.Store({ 
	state: {
		count: 1
	},
	getters: { // 类似vue的computed
		getStateCount: function (state) { // 上面定义的state
			return state.count + 1
		}
	},
	mutations: {
		addFunc (state) { // 上面定义的state
			state.count = state.count + 10
		}
	}
})

.vue实例调用方法为this.$store.commit('addFunc')

Actions

我们说store的值不能直接修改，如果要修改需要通过commit来触发mutations中的方法来实现。但是，官方并不介意我们这样直接去修改store里面的值，而是让我们去提交一个actions，在actions中提交mutation再去修改状态值

// store.js
const store = new Vuex.Store({ 
	state: {
		count: 1
	},
	getters: { // 类似vue的computed
		getStateCount: function (state) { // 上面定义的state
			return state.count + 1
		}
	},
	mutations: {
		addFunc (state) { // 上面定义的state
			state.count = state.count + 10
		}
	},
	actions: {
		addFuncAc (context) { // 接收一个与store实例具有相同方法属性的context对象
			context.commit('addFunc')
		}
	}
})

.vue实例调用方法为this.$store.dispatch('addFuncAc')
这里我们把commit提交mutations修改为使用dispatch来提交actions

commit和dispatch区别

commit：同步操作，写法：this.$store.commit('mutations方法名',值)
dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch('action方法名',值)