简介
有时候，频繁调用的函数，我们需要把它挂载在全局的vue原型上，方便调用，具体怎么操作，这里来记录一下。
一、这里以本地存储的方法为例
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的原型上
import db from \”@/store/localStorage\”;
new Vue({
el: \’#app\’,
beforeCreate() {
// 在 Vue 实例创建之前将 db 方法添加到原型上
Vue.prototype.$db = db;
},
router,
store,
render: h => h(App)
})
三、最后，就可以在全局的vue组件中使用
//直接在created里面打印查看
created() {
console.log(this.$db);
},
可以看到，db方法挂载成功
直接使用，通过this.$db方法，调用指定方法
//存储数据
this.$db.save(\’存储的名字\’,存储的数据 );
//获取数据
this.$db.get(\”获取的存储数据名称\”);
//移除数据
this.$db.remove(\”移除存储数据的指定名称\”);
//全部清空
this.$db.clear();
到此这篇关于Vue中挂载全局的方法详解的文章就介绍到这了,更多相关Vue挂载全局内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持悠久资源网！
您可能感兴趣的文章:
- vue组件挂载到全局方法的示例代码
- vue3.0如何在全局挂载对象和方法
- vue全局挂载实现APP全局弹窗的示例代码
- Vue3全局挂载使用Axios学习实战
- vue3配置全局参数(挂载全局方法)以及组件的使用
- 详解Vue全局组件的挂载之实现弹窗组件
- Vue3 全局实例上挂载属性方法案例讲解
