wilddog & arcgisAPI & vue-cli插件，天坑之路

Posted 2020-09-17 Lalala这是我的小马甲哦

背景交代

虽然我现在只是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的组件部分，只能算是有一点点小的收获，大三实习的压力好大呀，学无止境呢