封装vuex,保存到本地,保证页面刷新数据还在

378 阅读1分钟

1.新建index.js文件

/**
* 判断是否为空
*/

export function validatenull (val) {  if (typeof val === 'boolean') {    return false  }  if (typeof val === 'number') {    return false  }  if (val instanceof Array) {    if (val.length === 0) return true  } else if (val instanceof Object) {    if (JSON.stringify(val) === '{}') return true  } else {    if (      val === 'null' ||      val == null ||      val === 'undefined' ||      val === undefined ||      val === ''    ) {      return true    }    return false  }  return false}

2.新建store.js文件

import { validatenull } from './index.js' const keyName = 'jcjy-'/** * 存储localStorage */export const setStore = (params = {}) => {  let { name, content, type } = params  name = keyName + name  const obj = {    dataType: typeof content,    content: content,    type: type,    datetime: new Date().getTime()  }  if (type) window.sessionStorage.setItem(name, JSON.stringify(obj))  else window.localStorage.setItem(name, JSON.stringify(obj))}/** * 获取localStorage */export const getStore = (params = {}) => {  let { name, debug } = params  name = keyName + name  // console.log("params", name);  let obj = {}  let content  obj = window.sessionStorage.getItem(name)  if (validatenull(obj)) obj = window.localStorage.getItem(name)  if (validatenull(obj)) return  try {    obj = JSON.parse(obj)  } catch (e) {    return obj  }  if (debug) {    return obj  }  if (obj.dataType === 'string') {    content = obj.content  } else if (obj.dataType === 'number') {    content = Number(obj.content)  } else if (obj.dataType === 'boolean') {    content = JSON.parse(obj.content)  } else if (obj.dataType === 'object') {    content = obj.content  }  return content}/** * 存储localStorage */export const addStore = (params = {}) => {  let { name, content, type } = params  name = keyName + name  const obj = {    dataType: typeof content,    content: content,    type: type,    datetime: new Date().getTime()  }  if (type) window.sessionStorage.setItem(name, JSON.stringify(obj))  else window.localStorage.setItem(name, JSON.stringify(obj))}/** * 删除localStorage */export const removeStore = (params = {}) => {  let { name, type } = params  name = keyName + name  if (type) {    window.sessionStorage.removeItem(name)  } else {    window.localStorage.removeItem(name)  }}/** * 获取全部localStorage */export const getAllStore = (params = {}) => {  const list = []  const { type } = params  if (type) {    for (let i = 0; i <= window.sessionStorage.length; i++) {      list.push({        name: window.sessionStorage.key(i),        content: getStore({          name: window.sessionStorage.key(i),          type: 'session'        })      })    }  } else {    for (let i = 0; i <= window.localStorage.length; i++) {      list.push({        name: window.localStorage.key(i),        content: getStore({          name: window.localStorage.key(i)        })      })    }  }  return list}/** * 清空全部localStorage */export const clearStore = (params = {}) => {  const { type } = params  if (type) {    window.sessionStorage.clear()  } else {    window.localStorage.clear()  }}

3.使用vuex

3.1.新建state.js文件

import { getStore } from '@/utils/store'// 存储数据的对象,我们可以将你需要存储的数据在这个state中定义const state = {   token: getStore({ name: 'token' }) || ''} export default state

3.2.新建mutations.js文件

import { setStore } from '@/utils/store' const mutations = {  SET_TOKEN: (state, token) => {    state.token = token    setStore({      name: 'token',      content: state.token,      type: 'session'    })  }} export default mutations