1、在全局描述文件shims-vue.d.ts 或者是index.d.ts中声明

declare module "vue-ls" {
  import storage from "vue-ls"
  export default storage
}

2、在main.ts中初始化

import VueStoragePlugin from 'vue-ls';
// console.log(VueStorage)
const WebStorage = VueStoragePlugin.useStorage({
    namespace: 'pro__', 
    name: 'ls',
    storage: 'local',
})

WebStorage就是原本的vue-ls了

3、在vue3中使用的话,可以添加到全局属性中

app.config.globalProperties.WebStorage = WebStorage

4、在组件中引入使用

import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
const WebStorage = proxy.WebStorage

5、我个人是挂载到window上使用的

window.WebStorage = WebStorage

6、挂载到window需要在全局声明文件声明window属性(在全局描述文件shims-vue.d.ts 或者是index.d.ts中声明)

declare interface Window {
  WebStorage:any,
  localStorageL:any,

}

7、为什么用这个插件,主要有一个过期时间,不用自己写过期逻辑,如果不使用的话也可以根据这一个插件的大概,自己写一个带过期的方法

Logo

前往低代码交流专区

更多推荐