vue 3.0之localStorage的二次封装
config / index.js
// 环境配置
// 引入的时候 import config from "XXX/config";
const env = import.meta.env.MODE || 'prod';
const envConfig = {
dev: {
baseApi: '/',
mockApi: "https://www.fastmock.site/mock/e8101888e63cef7d588d7db9fbd2ad51/v_api"
},
test: {
baseApi: '/',
mockApi: "https://www.fastmock.site/mock/e8101888e63cef7d588d7db9fbd2ad51/v_api"
},
prod: {
baseApi: '/',
mockApi: ""
}
}
export default {
namespace: "maneger", // 命名空间 用于归类loaclStorage等本地缓存
env, // 环境变量 开发环境
mock: true, // 是否使用mock数据
...envConfig[env], // 请求的基础路径
}
utils / storage.js
// storage的二次封装
// eg : namespace: "maneger",
import config from "../config"
/**
* 使用方式
* * * main.js挂载全局
* import storage from './utils/storage';
const app = createApp(App);
app.config.globalProperties.$storage = storage;
* * * vue3.0 全局使用 vue实例上的数据
* import { defineComponent, reactive, getCurrentInstance } from "vue";
* let { appContext } = getCurrentInstance();
appContext.config.globalProperties.$storage.setItem("username","aaa");
appContext.config.globalProperties.$storage.setItem("age",20);
appContext.config.globalProperties.$storage.clearItem("age");
appContext.config.globalProperties.$storage.clearAll();
*/
export default {
getStorage () { // 先获取该项目的 命名存储空间 下的storage数据 maneger
return JSON.parse(window.localStorage.getItem(config.namespace) || "{}");
},
setItem (key, val) {
let storage = this.getStorage()
// console.log("setItem", storage);
storage[key] = val; // 为当前对象添加 需要存储的值
window.localStorage.setItem(config.namespace, JSON.stringify(storage)) // 保存到本地
},
getItem (key) {
return this.getStorage()[key]
},
// 清空 当前的项目下命名存储的空间 该key项的 Storage 数据
clearItem (key) {
let storage = this.getStorage()
delete storage[key]
window.localStorage.setItem(config.namespace, JSON.stringify(storage)) // 保存到本地
},
// 清空所有的 当前的项目下命名存储的空间 Storage 数据
clearAll () {
window.localStorage.clear();
}
}