vue3-persistedstore

VUE3 全局数据存储 & 界面刷新缓存机制

---

Install

npm install --save vue3-persistedstore
  or
yarn add vue3-persistedstore -S

Init

// store/index.ts
import createPersistedStore from 'vue3-persistedstate'
import xxx from './moudles/xxx'
export default createPersistedStore({
  key: 'client',
  storage: window.sessionStorage,
  modules: {
    xxx
  }
})

Examples

// modules/UserStore.ts
import { reactive } from 'vue'
import { IStore } from 'vue3-persistedstate'

declare interface UserUpdate {
  updateCount: Function
}

declare interface IUserState {
  count: number
}

const state: IUserState = reactive({
  count: 0
})

const store: IStore<IUserState, UserUpdate> = {
  persistedState: true, // 是否缓存数据
  state: state,
  update: {
    updateCount: (data) => {
      state.count = data
    }
  }
}

export default store
export { state, IUserState, UserUpdate }

// store/index.ts
import createPersistedStore from 'vue3-persistedstate'
import UserStore from './moudles/UserStore'
export default createPersistedStore({
  key: 'client',
  storage: window.sessionStorage,
  modules: {
    UserStore
  }
})

// main.ts
import store from './store/index'
app.use(store)

// demo.tsx
import { IUserState, UserUpdate } from '@/store/moudles/UserStore'
import { IStore } from 'vue3-persistedstore'
export default defineComponent({
  name: 'Demo',
  setup: () => {
    const userStore = inject('UserStore') as IStore<IUserState, UserUpdate>
    // userStore.state.count
    // userStore.update.updateCount(data)
  }
})

API

createPersistedStore([options])

• key <String>: store模块命名空间，默认: @@normal。
• storage <Storage>: 数据持久化存储方式，window.sessionStorage | window.localStorage， 默认: window.localStorage.
• modules <object>: store模块，默认: {}。

License

The MIT License (MIT). Please see License File for more information.