vueX+sessionStorage实现数据储存

前言：vueX5个属性简述

state：vuex的基本数据，用来存储变量

geeter：从基本数据(state)派生的数据，相当于state的计算属性

mutations：提交更新数据的方法，同步

actions：提交的是mutations，而不是直接改变状态，异步

modules：模块化vueX，里面每个对象都有完整的vueX

1、新建sessionStorage.js

export default {
	setValue(key, value) {
		if (typeof value == "object") {
			// 如果是对象，就转字符串存储
			value = JSON.stringify(value)
		}
		return window.sessionStorage.setItem(key, value);
	},
	getValue(key) {
		const data = window.sessionStorage.getItem(key);
		if (data) {
			let value = data;
			if ((data.indexOf('{') === 0 || data.indexOf('[') === 0) && data.indexOf(':') >= 0) {
				// 如果是字符串对象，就转对象
				value = JSON.parse(data)
			}
			return value
		} else {
			return false
		}
	},
	cleanValue(key) {
		window.sessionStorage.removeItem(key);
	}
}

2、新建user.js

import sessionStorage from '../sessionStorage.js'
export default {
	state: {
		userInfo: sessionStorage.getValue('userInfo'),
		token: sessionStorage.getValue('token'), //tokend
	},
	getters: {
		// 计算
	},
	mutations: {
		// 设置用户信息
		setUserInfo(state, userInfo) {
			state.userInfo = userInfo;
			sessionStorage.setValue('userInfo', userInfo);
		},
		// 清除用户信息
		clearUserInfo(state) {
			state.userInfo = "";
			sessionStorage.cleanValue('userInfo');
		},
		// 设置token
		setToken(state, token) {
			state.token = token;
			sessionStorage.setValue('token', token);
		},
		// 清除token
		cleanToken(state) {
			state.token = '';
			sessionStorage.cleanValue('token');
		},
	},
	actions: {},
}

3、store/index.js引入

import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app.js'
import user from './modules/user.js'
Vue.use(Vuex)

export default new Vuex.Store({
	state: {
		// 仓库
	},
	getters: {
		// 数据计算
	},
	mutations: {
		// 同步操作
	},
	actions: {
		// 异步操作，actions中不能直接更改状态，通过提交mutation来实现操作
	},
	modules: {
		// 模块化区分，每个子模块拥有完整的state、mutation、action、getter
		app,user,
	}
})