开发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. awvas启动不起来解决方案

    当双击桌面的"Acunetix图标",自动打开浏览器跳转页面,结果页面显示"无法访问此网站"按Windows+R键输入services.msc打开服务界面查看A ...

  2. 【C# 线程】线程池 ThreadPool

    Overview    如今的应用程序越来越复杂,我们常常需要使用<异步编程:线程概述及使用>中提到的多线程技术来提高应用程序的响应速度.这时我们频繁的创建和销毁线程来让应用程序快速响应操 ...

  3. Oracle的发展历程

    我们学习的是ORACLE(甲骨文)公司(就是收购Sun公司的甲骨文公司)的Oracle数据库(Oracle Database).Oracle数据库是关系型数据库中的大型数据库,存储量大,而且也非常安全 ...

  4. dockerfile 使用 entrypoint,导致 docker 无法正确挂载的问题

    一开始 Dockerfile 如下: FROM golang:latest WORKDIR $GOPATH/src/hellodocker COPY . .RUN go build . EXPOSE ...

  5. ORACLE SQL*PLUS 命令大全

    转至:https://www.cnblogs.com/kerrycode/archive/2011/06/09/2076248.html 其实网上已经有SQL*PLUS命令大全这方面的资料了,不过大都 ...

  6. Pycharm:如果想验证一个文件中的函数

    在该文件的函数后写上两句 def test(): pass if __name__='__main__': test() 这样就可以执行该函数 如果只是在其他文件中导入了该函数,则不会执行最后两段话, ...

  7. 写下载的时候,axios的responseType: "blob"(一定要修改)

    download(data, fileName) {       // window.URL.createObjectURL创建一个地址.       const url = window.URL.c ...

  8. 基于NopCommerce框架开发的微信小程序UrShop

    Urshop小程序商城 介绍 UrShop小程序商城 2.0发布啦,发布地址https://gitee.com/urselect/urshop UrShop 根据NopCommerce框架开发的,基于 ...

  9. webgl未使用独立显卡报告

    0x00 楔子 最近客户在使用我们的的三维可视化平台的时候,总是会出现浏览器崩溃,webgl context lost的情况. 这种请一般出现在电脑配置很低的电脑上,比如没有独显,只有很小现存的集成显 ...

  10. Laravel常用工具类

    工具类函数 Geom转成字符串 如果项目中有大量的计算经纬度需求,强烈建议使用PgSql的geometry类型 public static function formatGeomToStr($geom ...