Vuex持久化

使用插件让在vuex中管理的状态数据自动同时存储在本地免去自己存储的环节

1安装vuex-persistedstate插件

npm i vuex-persistedstate

2.vuex中准备要存储的数据

例如:

在src/store 文件夹下新建 modules 文件，在 modules 下新建 user.js 和 cart.js

// 用户状态
export default {
  namespaced: true,
  state: () => {
    return {
      profile: {
        id: '',
        nickname: '',
        avatar: '',
        token: '',
        mobile: ''
      }
    }
  }
}

// 购物车状态
export default {
  namespaced: true,
  state: () => {
    return {
      list: []
    }
  }
}

3在store下的index中导入

import { createStore } from 'vuex'

import user from './modules/user'
import cart from './modules/cart'

export default createStore({
  modules: {
    user,
    cart
  }
})

4使用vuex-persistedstate插件来进行持久化

import { createStore } from 'vuex'
import createPersistedstate from 'vuex-persistedstate'

import user from './modules/user'
import cart from './modules/cart'

export default createStore({
  modules: {
    user,
    cart
  },
  plugins: [
    createPersistedstate({
      key: 'erabbit-client-pc-store',
      paths: ['user', 'cart']
    })
  ]
})

说明

1. 默认是存储在localStorage中

2. key是存储数据的键名

3. paths是存储state中的那些数据，如果是模块下具体的数据需要加上模块名称，如user.token

4. 修改state后触发才可以看到本地存储数据的的变化

 

 

 

 

 

 

手动保存token和vuex中的数据

// 封装本地存储,以后改的话,直接在这边改
// 取值
export const getStorage = key => localStorage.getItem(key)
// 赋值
export const setStorage = (key, value) => localStorage.setItem(key, value)
// 清空
export const clearStorage = () => localStorage.clear()
// 移除
export const removeStorage = key => localStorage.removeItem(key)

export default {
  getStorage,
  setStorage,
  clearStorage,
  removeStorage
}

// vuex的变量
import { setStorage, getStorage } from '../utils/storage'
export default {
  // 开启命名空间
  namespaced: true,
  state () {
    return {
      token: getStorage('token'),
      refresh_token: getStorage('refresh_token'),
      user: {}, // 用户基本资料
      userProfile: {} // 用户的简介
    }
  },
  mutations: {
    setRefreshToken (state, refreshToken) {
      state.refresh_token = refreshToken
      // 给vuex存token值的时候,随便给本地存一份
      setStorage('refresh_token', refreshToken)
    },
    setToken (state, token) {
      state.token = token
      // 给vuex存token值的时候,随便给本地存一份
      setStorage('token', token)
    },
    setUser (state, payload) {
      state.user = payload
    },
    setuserProfile (state, payload) {
      state.userProfile = payload
    },
    clearUser (state) {
      state.token = ''
      state.refresh_token = ''
      state.user = {}
      state.userProfile = {}
    }
  }
}