vuex配合本地Cookies数据持久化

下载js-cookie插件
一个简单，轻量级的JavaScript API，用于处理浏览器cookie。cookie是存储在浏览器上的一小段数据，用来记录某些当页面关闭或者刷新后仍然需要记录的信息，比如当前已经登录过的状态、登录以后的用户信息等等

- 下载
- 导入  
- import jsCookie from 'js-cookie'
- jsCookie.get(key)
- jsCookie.set(key,value)
- jsCookie.remove(key)

// 专门用来操作cookie的方法包
// 内部封装了繁琐的操作方法 参数处理 暴露三个函数 get,set,remove
import Cookies from 'js-cookie'//引入

const TokenKey = 'hr_token'

// 获取token的方法
export function getToken() {
    
    
  return Cookies.get(TokenKey)
}

// 设置方法
export function setToken(token) {
    
    
  return Cookies.set(TokenKey, token)
}

// 删除方法
export function removeToken() {
    
    
  return Cookies.remove(TokenKey)
}

项目具体运用

import Cookies from 'js-cookie'

const state = {
    
    
  sidebar: {
    
    
    opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
    withoutAnimation: false
  },
  device: 'desktop'
}

const mutations = {
    
    
  TOGGLE_SIDEBAR: state => {
    
    
    state.sidebar.opened = !state.sidebar.opened
    state.sidebar.withoutAnimation = false
    if (state.sidebar.opened) {
    
    
      Cookies.set('sidebarStatus', 1)
    } else {
    
    
      Cookies.set('sidebarStatus', 0)
    }
  },