state

定义

const state = {
	name: 'baize'
}

使用

// 在模板中使用
{{$store.state.name}}
// 在js中使用
this.$store.state.name

getter

定义

const getters = {
	getName: (state) => state.name
}

使用

// 在模板中使用
{{$store.getters.getName}}
// 在js中使用
this.$store.getters.getName

mutations

定义

const mutations = {
	// 方式一：
	setName(state, name) {
		state.name = name
	},
	// 方式二：
	setName: (state, name) => {
		state.name = name
	}
}

使用

this.$store.commit('setName', 'baize666')

actions

定义

const action = {
	// 方式一：
	acSetName: (context, name) => {
		context.commit('setName', name)
	}
	// 方式二：
	acSetName: ({commit}, name) => {
		commit('setName', name)
	}
}

使用

this.$store.dispatch('acSetName', 'baize 666')

module

定义

const moduleA = {
	state,
	getters,
	mutations,
	actions
}

const moduleB = {
	state,
	getters,
	mutations,
	actions
}

const modules = {
	moduleA,
	moduleB
}

export default new Vuex.Store({
	modules
})

使用

this.$store.state.moduleA.name
this.$store.getters.moduleA.getName

高级用法

import { mapState, mapGetters } from "vuex"; //导入vuex的辅助函数

//计算属性computed无法传递参数
  computed: {
    // 映射 state 中的数据为计算属性
    ...mapState(["name", "age"]),
    // 映射 getters 中的数据为计算属性
    ...mapGetters(["getName", "getAge"]),
  }

import { mapMutations, mapActions } from "vuex";

methods: {
    //用于生成与 mutations 对话的方法，即：包含 $store.commit(xx) 的函数
    ...mapMutations(["setName", "setAge"]),
    //用于生成与 actions 对话的方法，即：包含 $store.dispatch(xx) 的函数
    ...mapActions(["acSetName", "acSetAge"]),
  }