vuex中mapState和mapMutations用法

1.新建store->index.js文件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
	state: {
		/**
		 * 是否需要强制登录
		 */
		forcedLogin: false,
		hasLogin: false,
		userName: "",
		test: "",
	},
	mutations: {
		test(state, test) {
			state.test = test;
		},
		login(state, userName) {
			state.userName = userName || '新用户';
			state.hasLogin = true;
		},
		logout(state) {
			state.userName = "";
			state.hasLogin = false;
		}
	}
})

export default store

2.main.js中注册store

3.在关联的显示页面(main.vue)引用状态变量

4.在变更状态变量的页面(user.vue)引用调用方法

当如上设置后,在user.vue页面点击按钮后,main.vue页面的test值就变成了'hello world'

你可以理解为...mapMutations[xxx]意思是将store中的[]内操作方法引用到了当前页面的methods:{}内,因此用this.test('hello world');就可以在当前页面调用store中的赋值函数

如上图,在store的index.js中,已预先设置好了test调用方法,因此在这里使用赋值时,main.vue绑定了test方法关联的test状态变量,就已经被更改了