将 chrome.storage 中的数据加载到 vue.js 数据中

Question

我正在构建一个 chrome 应用程序，我将 Vue.js 用于选项页面。所以我想从 chrome 存储中加载设置并将其放入 vue 数据中。

我的问题是，我无法从 chrome 存储回调中访问 vue 组件。每次我在回调中调用它时，所有 vue 元素都是未定义的。有没有办法，让chrome存储cb函数return一个值，或者给它一个额外的回调。

这是我的代码

name: 'app',
    data: function () {
        return {
            data []
        }
    },
    methods: {
        init: function() {
            chrome.storage.sync.get('series', function (storageData) {
                this.data = storageData   //this is not possible, because this.data is undefined
                })
            });
        }
    },
    created: function () {
        this.init();
    }
}

Answer 1

如果使用 ES6 和转译（首选方法）。注意：箭头函数不会创建新的上下文。

init: function() {
    chrome.storage.sync.get('series', storageData => {
        this.data = storageData
    });
}

ES5 解决方法：

init: function() {
    var self = this;
    chrome.storage.sync.get('series', function (storageData) {
        self.data = storageData
    });
}

将 chrome.storage 中的数据加载到 vue.js 数据中

load data from chrome.storage into vue.js data

google-chrome

vue.js

google-chrome-app