开发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. 一个命令让redis服务端所有信息无所遁形~(收藏吃灰系列)

    1.info命令作用 在redis客户端执行INFO 命令以便于计算机解析和人工阅读的简单格式返回有关redis服务端的所有信息和统计数据. 可选参数可用于选择特定的信息部分: Server 服务器基 ...

  2. Vue 源码解读(8)—— 编译器 之 解析(上)

    特殊说明 由于文章篇幅限制,所以将 Vue 源码解读(8)-- 编译器 之 解析 拆成了上下两篇,所以在阅读本篇文章时请同时打开 Vue 源码解读(8)-- 编译器 之 解析(下)一起阅读. 前言 V ...

  3. 思迈特软件与明略科技优势互补强强联合,快速迭代引领BI市场

    从全球范围看,自从上世纪80年代信息技术在企业应用中开始普及,至今一共经历了信息化.SaaS化.移动化和AI化四个阶段. 人工智能在中国发展的机遇和挑战 中国的AI创业公司之间竞争非常激烈,尤其表现在 ...

  4. 【C# 线程】转载 句柄的基本概念 .NET对象与Windows句柄

    转载自:https://www.cnblogs.com/silverb/p/5300255.html 句柄的基本概念 1.句柄就是进程句柄表中的索引.2.句柄是对进程范围内一个内核对象地址的引用,一个 ...

  5. 详解 c# 克隆

    克隆方法是原型设计模式中必须使用的方式,它将返回一个与当前对象数据一致的对象.正如其名,犹如一个模子雕刻而出.克隆类型分为两种:浅克隆.深克隆. 浅复制就是仅复制类中的值类型成员 深复制就是复制类中的 ...

  6. shell脚本实现文件的自动上传以及下载 scp sftp lftp 还有expect命令

    转至: 最近需求要求定期从一个[定期更新的文件] 中解析员工信息 ,插入到数据库中. 按理来说很简单,  无非就是io流读文件,然后crud balalalala..... 其实不是的, 我我写的这个 ...

  7. PromQL全解析

    PromQL(Prometheus Query Language)为Prometheus tsdb的查询语言.是结合grafana进行数据展示和告警规则的配置的关键部分. 本文默认您已了解Promet ...

  8. .NET6: 开发基于WPF的摩登三维工业软件 (8) - MVVM

    基于WPF开发界面的一个很大优势是可以方便地基于MVVM设计模式开发应用.本文从应用的角度基于MVVM实现参数化管材的创建界面. 1 MVVM MVVM是Model-View-ViewModel的简写 ...

  9. 微信小程序防抖

    https://www.cnblogs.com/daviddd/p/12470480.html 1:wxml:设置一个按钮 <button type="primary" bi ...

  10. php在windows上安装kafka扩展

    一.下载kafka扩展包 链接:https://pecl.php.net/package/rdkafka 二.解压安装包 三.修改php.ini 复制librdkafka.dll 到php\php7. ...