开发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. bash初始化文件详解

    目录 交互式(interactive)shell/非交互式(non-interactive)shell 如何启动一个交互式shell/非交互式shell 如何判断是否为交互式shell 登录式(log ...

  2. Docker 设置国内镜像源

    创建或修改 /etc/docker/daemon.json 文件,修改为如下形式    # vi /etc/docker/daemon.json    {        "registry- ...

  3. 关于python的turtle详解(转载)

    详解文章见turtle--海龟绘图--python3.10.2文档

  4. python-can库基于PCAN-USB使用方法

    一.概述 1.介绍 python-can库为Python提供了控制器局域网的支持,为不同的硬件设备提供了通用的抽象,并提供了一套实用程序,用于在CAN总线上发送和接收消息. 支持硬件接口: Name ...

  5. java 执行shell命令遇到的坑

    正常来说java调用shell命令就是用 String[] cmdAry = new String[]{"/bin/bash","-c",cmd} Runtim ...

  6. appium1-macOS10.12下如何丝滑的使用appium?

    1.下载或者更新Homebrew:homebrew官网 macOS 不可或缺的套件管理器 $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githu ...

  7. 矩池云上关于conda的一些使用技巧

    关于源的加速和使用 bash /public/script/switch_conda_source.sh 输入想要切换的源前面的序号,然后按回车,源会自动切换. 当然这个地方需要注意的是如果遇到一些国 ...

  8. tp5手机号验证码发送及验证

    原文链接:https://blog.csdn.net/weixin_43389208/article/details/119153323 为什么使用短信: 场景:通常在使用手机号注册时需要发送短信验证 ...

  9. Yaconf-配置管理扩展

    1.下载yaconf安装包git clone https://github.com/laruence/yaconf.git2.目录切换至yaconf,编译生成so 文件(找到你的phpize位置) / ...

  10. myBatis plus 去除生成 controller

    ​ 由于我在网上没有找到答案, 所以分享给大家学习, 我也是第一次用 mybtis plus 的新生成器生成代码, 所以基础代码都是在官网复制所得. 在这里也支持大家在解决不了问题时, 可以试着看看源 ...