wilddog & arcgisAPI & vue-cli插件,天坑之路(三)
来源:互联网 发布:h3c交换机禁止mac 编辑:程序博客网 时间:2024/05/22 04:50
背景交代
虽然我现在只是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.jsimport ref from './assets/js/Tool'// Vue.prototype.refHelper = ref //方法一Vue.use(ref)// Tool.jsimport 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的组件部分,只能算是有一点点小的收获,大三实习的压力好大呀,学无止境呢
1 0
- wilddog & arcgisAPI & vue-cli插件,天坑之路(三)
- vue-cli&webpack&arcgis API For JS的天坑之路(一)
- vue-cli&webpack&arcgis API For JS的天坑之路(二)
- Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目
- Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目
- vue学习之路(一)--vue-cli安装+vue-router+vue-resource
- vue组件化挖矿之旅(三):vue-cli 自定义过滤器的使用
- vue-cli项目导入jquery插件(其他插件类似)
- Asp.net+Vue2构建简单记账WebApp之三(使用Vue-cli构建vue.js应用)
- vue-cli入门(三)——人员管理实例
- vue-cli入门(三)——人员管理实例
- vue-cli入门(三)——人员管理实例
- vue-cli(详解)
- vue 2.0入门 之 脚手架 vue-cli
- 初学vue之vue-cli 搭建
- wilddog
- vue-cli入门(三)——vue-resource登录注册实例
- Vue 爬坑之路(三)—— 使用 vue-router 跳转页面
- C语言小白归并排序
- Python 数字对象
- XMU 1613 刘备闯三国之三顾茅庐(一) 【并查集】
- WPF多线程UI更新——两种方法
- eclipse上安装spring tool suite插件的过程记录
- wilddog & arcgisAPI & vue-cli插件,天坑之路(三)
- LeetCode119. Pascal's Triangle II
- 南阳OJ 题目64:鸡兔同笼
- Java 实例
- 【转载】ubutun中VanetMobiSim的安装和初步使用
- 三十五、SpringBoot配置属性之DataSource
- CGLib动态代理的介绍及用法(单回调、多回调、不处理、固定值、懒加载)
- 我在linux上架设的第一个djano网页服务器()
- java面试题-数据库