vuex

第一步看官网

先了解一下基本内容：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

甚至还有个说法，说是没有学vuex就不算学了vue。

核心概念有如下这么多，我只学了打箭头的几个。

对于我项目来说，我只使用了vuex的一部分功能，那就是用来管理登录状态。

也就是在进入一个页面的时候判断如果没有登录的话跳往登录页，注册之后自动跳往登录页，还有就是首页可以不登录就进入或者必须登录才可以进入。

安装

我用的npm

npm install vuex --save

然后我在webpack的项目里使用，就在mian.js里声明使用

import Vuex from 'vuex'
Vue.use(Vuex)

在项目下src目录创建一个文件夹store，新建index.js

开始管理登录状态

在index.js里先添加这个

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

然后我是这样的

const state = sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')) : {
	// 定义一个user对象
	// 组件中通过this.$store.state.user获取
	user: {
		username: ''
	}
};

const getters = {
	// 组件中通过this.$store.getters.getUser获取
	getUser(state) {
		return state.user;
	}
};

// 定义改变state的初始值方法,类似于setter
const mutations = {
	// 在组件中通过this.$store.commit('updateUser', user)调用
	updateUser(state, user) {
		state.user = user;
	}
};

// 定义触发mutations里的函数
const actions = {
	// this.$store.dispatch()来调用
	asyncUpdateUser(context, user) {
		context.commit('updateUser', user);
	}
};

export default new Vuex.Store( {
	state,
	getters,
	mutations,
	actions
});

在这里Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。有两种方式context和{{ commit }}：


然后通过dispatch发送状态变更请求

注意这里没有使用token的方式而是设置了一个isLogin的变量，通过他的改变来判断登录没。
user是后端传过来的包含一些变量的json。

到这里登录成功就可以判断了，
登录前

登录后

只有这样还不够，因为状态管理还没做到，接下来是进入一个页面判断是否登录了
在main.js里，使用beforeEach，这里的to, from, next分别是字面意思，去哪里，哪里来和下一步指向哪里，在这里你觉得to和next应该是一样的把，不对，next是你可以指定的

router.beforeEach((to, from, next) => {
	// 获取登录状态
	let isLogin = sessionStorage.getItem('isLogin');
	console.log("test");
	if (to.path == '/Regist') {
		// 清空
		sessionStorage.clear();
		console.log("test1");
		next();
	}
	else if (to.path == '/Login') {
		sessionStorage.clear();
		console.log("test2");
		if (isLogin != null){
			console.log("test3");
			next({path: '/'})
		}
		console.log("test5");
		next()
	}
	else if (to.path == '/') {
		console.log("test6");
		next()
	}
	else if (isLogin == null) {
		console.log("test4");
		next({path: '/Login'})
	}
	next();
})

然后写上上边的逻辑就行了，在这里我通过打印test来看他进入了那些判断。

在这里写的时候特别容易出死循环