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');},// 设置tokensetToken(state, token) {state.token = token;sessionStorage.setValue('token', token);},// 清除tokencleanToken(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、getterapp,user,}
})