简介：有时候，频繁调用的函数，我们需要把它挂载在全局的vue原型上，方便调用，具体怎么操作，这里来记录一下。
一、这里以本地存储的方法为例
javascript
复制代码
var localStorage = window.localStorage;
const db = {
/**
* 更新状态
*/
save(key, value) {
// console.log(key, value);
try {
localStorage.setItem(key, JSON.stringify(value));
} catch (error) {
console.error("Error storing data in localStorage:", error);
}
},
/**
* 获取状态，如果有状态值，获取最新状态值；如果没有，获取默认值
*/
get(key, getSaveVal = null) {
// console.log(key, getSaveVal);
try {
return JSON.parse(localStorage.getItem(key)) || getSaveVal;
} catch (err) {
// console.log(err);
return null; // 如果发生错误，也返回 null
}
},
/**
* 移除状态
*/
remove(key) {
// console.log(key);
localStorage.removeItem(key);
},
/**
* 清空状态
*/
clear() {
localStorage.clear();
}
};
export default db;
二、在main.js中引入存储方法，然后在路由守卫中挂载在vue的原型上
javascript
复制代码
import db from "@/store/localStorage";
new Vue({
el: '#app',
beforeCreate() {
// 在 Vue 实例创建之前将 db 方法添加到原型上
Vue.prototype.$db = db;
},
router,
store,
render: h => h(App)
})
三、最后，就可以在全局的vue组件中使用
javascript
复制代码
//直接在created里面打印查看
created() {
console.log(this.$db);
},
可以看到，db方法挂载成功
直接使用，通过this.$db方法，调用指定方法
javascript
复制代码
//存储数据
this.$db.save('存储的名字',存储的数据 );
//获取数据
this.$db.get("获取的存储数据名称");
//移除数据
this.$db.remove("移除存储数据的指定名称");
//全部清空
this.$db.clear();
创作不易，感觉有用，就一键三连，感谢(●'◡'●)