背景交代

虽然我现在只是npm install wilddog了一下下,但是我有预感,不会那么顺利的。我就是知道不会那么顺利,看我现在才来填坑。 wilddog的用法官网上说得很清楚并且还有视频我就不多说了,还没有深入使用,暂时先不说了。

问题

.vue文件一个组件就是自己单独的部分,当我在第一个.vue文件中创建了ref连接wilddog数据库对象以后,当我需要在其他.vue文件中使用的时候,怎么办?

解决方法

  • 首先,我想的是在第二个.vue文件中在创建一个ref连接数据库就可以了,毕竟都是连接数据库,没有什么问题吧。想当然的失败了哦。pass,当然有可能是我使用有问题,如果正确打开方式,请一定要告诉我,不枉费我折腾了两天了。
  • 还有就是肯定可以解决的vuex,但是我觉得杀鸡焉用宰牛刀,并且如果继续用别人的插件,那我就不会明白原理了。

  • 那么这样呢?创建一个全局的ref对象就可以,那么怎么创建呢?直接百度的话vue-cli创建全局变量,就会有很多答案,我亲自测试成功的就是 点击这里
    这里写图片描述

    其实就是 创建一个vue插件
    vue插件原理
    vue文档

  • 创建插件的方法:

    • 定义一个操作对象,里面包含你所需要的类,变量等var refHelper = { ref:myRef} 在refHelper里面你可以添加你想要的方法全局变量等。
    • 通过export default导出export default refHelper;
    • 在main.js中引入import ref from './assets/js/Tool'
    • 将引入的对象挂在到vue原型上,注意挂载的一定是你设置的refHelper对象Vue.prototype.refHelper = ref
    • 使用:通过this.refHelper.ref就可以在文件的任意位置使用了,我没有猜错的话
    • 这种写法本质应该都是一样的,都是挂在到vue原型上,感觉更好看一点
      这里写图片描述

贴代码

// main.js
import ref from './assets/js/Tool'
// Vue.prototype.refHelper = ref //方法一
Vue.use(ref)

// Tool.js
import Wilddog from 'wilddog'

 // 初始化
 var config = {
   authDomain: "lorry.wilddog.com",
   syncURL: "https://lorry.wilddogio.com"
 };
 Wilddog.initializeApp(config);
 var myRef = Wilddog.sync().ref();

// 第一种方法
// var refHelper = {
//   ref: myRef
// }
// export default refHelper;

export default{
  install(Vue,options)
  {
    Vue.prototype.ref = function () {
      return myRef;
    }
  }
}

小结

不知道还会遇到什么坑爹的事情,所以只是小结。发现自己还是只懂使用工具,却没有认真研究过工具的原理,所以下来也认真阅读了es6的书,vue的组件部分,只能算是有一点点小的收获,大三实习的压力好大呀,学无止境呢

Logo

前往低代码交流专区

更多推荐