作为程序员这个vuex的2G包都不知道就太low了吧。

作为程序员这个vuex的2G包都不知道就太low了吧。

我相信每一个程序员都会使用localStorage,会存数据,会取数据,因为这和我们前端的工作可以说是必不可少,项目大点的时候几乎每天都要跟它大交道,作为一个有经验的开发人员来说,今天才发现比localStorage存取数据更好用的一个npm的2G背包,必须分享一下~

vuex-persistedstate–数据持久化存储(适用于vue2)

话不多说,上步骤

• 第一步肯定是下包啦~npm install --save vuex-persistedstate@3.2.1

• 在 src/store/index.js(看你具体要使用在哪个地址就配置在哪里,这里我是配置在vuex的文件中的) 模块中，导入并配置 vuex-persistedstate 包

import Vue from 'vue'
import Vuex from 'vuex'
// 1. 导入包
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

• 挂载到插件上

export default new Vuex.Store({
  // 2. 配置为 vuex 的插件
  plugins: [createPersistedState()],
  state: {
    token: ''
  },
  mutations: {
    updateToken(state, newToken) {
      state.token = newToken
    }
  }
})

我挂载在state中的,这个包会自动检测的state中的数据,自动保存到本地,用的时候它也会自动获取保存在本地的数据,极大的提高了我开发的效率(又可以多摸一会鱼了)