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

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

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

当然,我是通过 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. Win10 装好 Hyper-V 又要将其卸载方法记录

    现需要在 windows 上安装虚拟机使用 linux 系统,遂想起来 win10 本身就有 Hyper-V 虚拟工具,但是 win10 家庭版并没有这个服务,百度之,找到了方法(Win10家庭版怎么 ...

  2. 「Excel实用技巧」拿下这个报表工具,轻松给报表加水印!

    水印报表是什么?怎么给excel表格加水印? 许多时候,为了防止报表被盗.保护信息安全和保护版权,采用水印能够有效实现该需求.水印是为了防止报表被盗.进行真伪鉴别.版权保护等,而在报表中添加半透明的图 ...

  3. HDFS的上传下载流程

    hdfs上传流程 首先客户端向nn请求上传文件.nn经过检查回应客户端是否可以上传.客户端得到同意后向nn请求上传第一块文件的dn.nn返回给客户端dn的地址.客户端与其中一个dn1建立连接然后dn1 ...

  4. 【C# .Net GC】Windows 系统上的大型对象堆

    原文链接:https://docs.microsoft.com/zh-cn/dotnet/standard/garbage-collection/large-object-heap NET 垃圾回收器 ...

  5. 【windows 访问控制】十一、C# 实操 对象 System.Security.AccessControl 命名空间

    AccessControl 命名空间 结构图 解说: DirectorySecurity=目录ACLFileSecurity=文件ACLFileSystemAuditRule=目录和文件中SACL中的 ...

  6. MySQL Community Server安装

    MySQL Community Server安装 下载地址:https://dev.mysql.com/downloads/mysql/,zip安装,解压缩之后其实就可以用了,但是要进行配置. 1,解 ...

  7. 网络类型PAN、LAN、WLAN、CAN、MAN、WAN简单介绍

    转至:https://www.cnblogs.com/itmacy/p/12290036.html PAN:personal area network 个人区域网络 无线连接:蓝牙,红外,NFC 有线 ...

  8. linux 平台实现 web 服务器的自动化发布 (纯shell 版本,存在ssh 不能自动退出问题,待解决)

    转至:https://www.cnblogs.com/vmsky/p/13824172.html 背景说明 1.集团OA系统上线,web App 部署在6台服务器中,因项目初期,每次更新都需要进行大量 ...

  9. xlrd》操作excel 出现的问题:File "D:\python37\lib\site-packages\xlrd\formula.py", line 1150, in evaluate_name_formula assert len(tgtobj.stack) == 1

    xlrd>操作excel  出现的问题 报错如下: D:\python37\python.exe D:/testWang/waimai/tools/get_excelData.py*** for ...

  10. 哈工大 NLP 实验一 汉语分词系统

    NLP实验代码可见github:NLP实验代码整理 本实验会查重,而且写起来难度比较大,建议早一些开始.实验报告要用顶会论文形式呈现,建议使用overleaf里的ACL论文latex模板比较方便一点.