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

Question

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

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

这是我的代码

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和transpiling（优选方法）。注意：箭头函数不会创建新的上下文。

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 
    }); 
}