开发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. Kali Linux解压包命令:

    Kali Linux解压包命令: tar.gz格式压缩包: root@kali:~# tar -xzvf 压缩包.tar.gz -C /root/home/Desktop root@kali:~# c ...

  2. “百度杯”CTF比赛 九月场 类型:Web 题目名称:SQLi ---不需要逗号的注入技巧

    今天在i春秋做题的时候遇到了一道非常好的题目,于是在参考了wp的基础上自己复现了一遍,算作一种技巧的学习与收藏吧. 题目i春秋连接:https://www.ichunqiu.com/battalion ...

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

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

  4. 【windows 操作系统】进程控制块(PCB)

    转载地址:https://blog.csdn.net/qq_38499859/article/details/80057427一.目录文章目录    操作系统3 ----进程控制块(PCB)详解    ...

  5. 2020ICPC济南站 J.Tree Constructer

    题目大意:给定一棵N个顶点的树,顶点为1~N,对于一个序列A1,A2,-,An,若Ai | Aj == 2^60-1,则会连一条边(i,j).要求求出一个序列,可以唯一确定所给定的树. 思路:考虑到树 ...

  6. POJ3368题解

    题目大意:一个非降序序列,有若干查询,每次查询一个区间中重复次数最多的数字的个数. 思路:因为是非降序的,所以可以从头遍历把每个相同的数字划为一个块,用p[i]表示ai划分到了哪个块里面,同时还可以记 ...

  7. ASP.NET Core 6框架揭秘实例演示[16]:内存缓存与分布式缓存的使用

    .NET提供了两个独立的缓存框架,一个是针对本地内存的缓存,另一个是针对分布式存储的缓存.前者可以在不经过序列化的情况下直接将对象存储在应用程序进程的内存中,后者则需要将对象序列化成字节数组并存储到一 ...

  8. 2W字长文吐血整理 Docker&云原生

    Docker 和 云原生 一.概念介绍 1.1 Docker Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux或Win ...

  9. MySQL从卸载到安装!图文详细版(你想知道的全都有!!)

    2. MySQL的下载.安装.配置 2.1 MySQL的四大版本 MySQL Community Server社区版本,开源免费,自由下载,但不提供官方技术支持,适用于大多数普通用户. MySQL E ...

  10. jquery, js轮播图插件Swiper3

    轮播图插件Swiper3 HTML代码 如果只是简单的使用轮播图,直接复制我的html代码就可以. 如果想要高级一些,就自己去看文档吧 <!DOCTYPE html> <html l ...