vuex 数据持久化

Installtion

npm i store-persistence

Usage

import Vue from 'vue'
import store from '@/store'
import storage from 'good-storage'
import StorePersistence from 'store-persistence'

// 缓存方法可使用 localStorage/sessionStorage/uni.getStorageSync 等
Vue.use(StorePersistence, {
  name: '$updateStore',
  removeItem: (v) => storage.remove(v),
  getItem: (v) => storage.get(v),
  setItem: (n, v) => storage.set(n, v)
  update: (name: string, value: any) => store.commit('update', { name, value })
})

export default {
  methods: {
    onClicked() {
      this.$updateStore({
        name: 'test',
        value: 'hello world',
        cache: false // 可选, 默认true, 如果设为false, 则只更新vuex数据 不做缓存处理
      })
    }
  }
}

Props

| 参数名 | 说明 | 是否必填 | 默认值 | | ---------- | --------------------------- | -------- | -------------- | | name | 方法名 | 否 | $updateStore | | names | 存储所有 store 字段的字段 | 否 | states | | update | 更新数据至 store | 是 | - | | getItem | storage.get | 是 | - | | setItem | storage.set | 是 | - | | removeItem | storage.remove | 是 | - |

Live Demo