开发chrome插件时遇到一个问题,那就是单文件组件的data数据需要从chrome提供的storage对象中获取,但是 chrome.storage.sync.get 方法是异步获取数据的,需要通过它的回调函数进行使用获取到的数据,没有返回值

解决方案就是 通过Function.bind(context)方法进行绑定上下文信息,这样就可以正常的在回调函数中进行设置到 vue 单文件组件的数据里面了

beforeMount:function(){
chrome.storage.sync.get("key",function(items){
console.log(this)
}.bind(this))
}

当然,我是通过 vue的声明周期 挂载之前,创建之后的阶段中进行调用获取步骤的

vue开发chrome扩展,数据通过storage对象获取的更多相关文章

  1. 手把手教你开发Chrome扩展三:关于本地存储数据

    手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发Chrome扩展二:为html添加行为 手把手教你开发Chrome扩展三:关于本地存储数据 HTML5 ...

  2. 开发 chrome 扩展 GitHub-Remarks 的一些想法以及遗憾

    前文 对于单页应用中如何监听 URL 变化的思考 说到我在开发 chrome 扩展 GitHub Remarks 中遇到的一个问题,本文来聊聊开发这个扩展的前后心路历程. 为什么开发这个扩展?前文说到 ...

  3. 手把手教你开发chrome扩展

    转载:http://www.cnblogs.com/walkingp/archive/2011/04/04/2003875.html 手把手教你开发chrome扩展一:开发Chrome Extenst ...

  4. 手把手教你开发Chrome扩展二:为html添加行为

    手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发Chrome扩展二:为html添加行为 手把手教你开发Chrome扩展三:关于本地存储数据 上一节我们 ...

  5. 手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单

    手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单   手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发Chrome扩 ...

  6. AutoCAD.NET二次开发:扩展数据之XData

    结果缓存——ResultBuffer 结果缓存即 Autodesk.AutoCAD.DatabaseServices.ResultBuffer 类型,使用 ResultBuffer 对象时需要提供一个 ...

  7. VUE开发请求本地数据的配置,旧版本dev-server.js,新版本webpack.dev.conf.js

    VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...

  8. 使用 Create-React-App 开发 Chrome 扩展

    整理 Kindle 标注.书签和笔记从未如此简单! Kindle 标注管理应用 Kindle Mate 只支持 Windows,不支持 Mac.标注只是解析我的剪贴文本文件,配合 FileReader ...

  9. vue开发 - 将方法绑定到window对象,给app端调用

    通过jsBridge方法,H5可以调用客户端(ios,android)的内部方法,同样,客户端也需要能调用H5页面里定义的js方法,但是在vue里,所有的方法都是在组件内部声明的,也只能在组件内部调用 ...

随机推荐

  1. Hbuilderx换行问题(属性合并一行展示)

    1. 标签折行,非吾所愿(格式化代码快捷键:Ctrl + K)  2. 打开工具-设置 3. 点击左侧插件配置,点击右边下侧jsbeautify 4. 将原本的折行长度由120改为1200(长度可根据 ...

  2. BugKu-baby_flag.txt

    下载zip压缩包解压得到图片(你们不要再打啦!hhh)使用winhex或者010查看,最下面看到一串数字 怀疑可能是十六进制转换字符串,然后使用在线网站进行转换,得到一串base64编码, 再进行ba ...

  3. 内网安全---隐藏通信隧道基础&&网络通信隧道之一ICMP隧道

    一,隐藏通信隧道基础知识 在完成信息收集之后,我们要判断流量是否出的去.进的来.隐藏通信隧道技术常用于在受限的网络环境中追踪数据流向和在非受信任的网络中实现安全的数据传输. 1.常见的隧道: .网络层 ...

  4. web安全之快速反弹 POST 请求

    在 CTF Web 的基础题中,经常出现一类题型:在 HTTP 响应头获取了一段有效期很短的 key 值后,需要将经过处理后的 key 值快速 POST 给服务器,若 key 值还在有效期内,则服务器 ...

  5. [题解]RQNOJ PID87 过河

    链接:http://www.rqnoj.cn/problem/87 思路:动态规划 定义f[i][j]表示到达第 i 块给定石头用了 j 块添加石头的最少步数. 转移方程:f[i][j]=min{f[ ...

  6. 企业数据仪表盘设计思路,如何设计自己的BI产品

    ​现在,很多企业的高层领导喜欢建数据仪表盘或者管理驾驶舱,甚至用巨大无比的显示屏阵列来展示各种关键业务指标KPI,那成功设计一个数据仪表盘需要如何做?又需要注意什么问题呢? 数据仪表盘是数据可视化的一 ...

  7. 今儿直白的用盖房子为例,给你讲讲Java建造者模式

    摘要:建造者模式(Builder Pattern)又叫生成器模式,是一种对象构建模式.它可以将复杂对象的建造过程抽象出来(抽象类别),使这个抽象过程的不同实现方法可以构造出不同表现(属性)的对象. 本 ...

  8. 2020ICPC上海站 C. Sum of Log

    题目大意: 给定T组X,Y,对于每组X,Y,求上面式子   的值,其中  当x为真时等于1,其他情况等于0. 其中. 思路: 对X,Y一起进行数位DP,我们把每一位枚举数字的上限以及数字之前是否有前导 ...

  9. Echarts图表类型

    每个系列通过 type 决定自己的图表类型: type: 'bar':柱状/条形图 type: 'line':折线/面积图 type: 'pie':饼图 type: 'scatter':散点(气泡)图 ...

  10. vue--加载模块详解

    1.postcss-loader.autoprefixer.css-loader .sass-loader:加载css模块及css预处理模块,添加浏览器前缀到CSS内容里 加载模块:npm insta ...