Web 扩展中的共享 vuex 状态(死对象问题) [英] Shared vuex state in a web-extension (dead object issues)
问题描述
我正在尝试在网络扩展中使用共享的 vue.js 状态.
状态存储在后台脚本的 DOM 中并呈现在弹出页面中.
第一次尝试
我的第一次尝试是使用一个没有 vuex 的简单存储:
background.js
var store = {计数:0};popup.js
browser.runtime.getBackgroundPage().then(bg => {var store = bg.store;var vue = new Vue({el: '#app',数据: {状态:商店},})})popup.html
<p>{{ state.count }}</p><p><button @click="state.count++">+</button></p><script src="vue.js"></script><script src="popup.js"></script>
这在第一次打开弹出窗口时有效(您可以增加计数器并更新值)但是当第二次打开弹出窗口时，渲染失败并显示 [Vue warn]: Error in render: "类型错误:无法访问死对象".这似乎是由于第一个弹出窗口中的 vue.js 实例通过设置自己的 getter/setter 修改了 store，自从第一个弹出窗口关闭后，这些 getter/setter 现在已被删除，使得共享状态无法使用.这似乎是不可避免的，所以我决定尝试一下 vuex.
第二次尝试
background.js
var store = new Vuex.Store({状态: {计数:0},突变:{增量:状态=>state.count++，}})popup.js
browser.runtime.getBackgroundPage().then(bg => {var store = bg.store;var vue = new Vue({el: '#app',计算:{数数 () {返回 store.state.count}},方法: {增量 () {store.commit('增量')},}});})popup.html
<p>{{count}}</p><p><button @click="increment">+</button></p><script src="vue.js"></script><script src="popup.js"></script>
不幸的是，这也不起作用.您可以打开弹出窗口并查看当前计数器值，但增加它不会更新视图(您需要重新打开弹出窗口以查看新值).
当采用相同的代码但在 popup.js 中声明 store 时，代码按预期工作，所以这应该工作，但由于某种原因它没有
我的问题:
- vue.js 根本无法处理这个用例吗?
- 如果是这样，其他框架(angular、react、...)是否可以在这里工作?
抱歉耽搁了，我为其创建了一个节点模块:
https://github.com/MitsuhaKitsune/vuex-webextensions
该模块使用 webextensions 消息传递 API 来同步 webextension 上的所有商店实例.
安装就像另一个 vuex 插件，您可以在自述文件中查看.
如果您有任何问题或反馈，请在此处或在 github 问题上告诉我.
I'm trying to use a shared vue.js state in a web extension.
The state is stored in the background script's DOM and rendered in a popup page.
First attempt
My first attempt was to use a simple store without vuex:
background.js
var store = {
count: 0
};
popup.js
browser.runtime.getBackgroundPage().then(bg => {
var store = bg.store;
var vue = new Vue({
el: '#app',
data: {
state: store
},
})
})
popup.html
<div id="app">
<p>{{ state.count }}</p>
<p>
<button @click="state.count++">+</button>
</p>
</div>
<script src="vue.js"></script>
<script src="popup.js"></script>
This works the first time the popup is opened (you can increment the counter and the value is updated) but when the popup is opened a second time, rendering fails with [Vue warn]: Error in render: "TypeError: can't access dead object". This seems to be caused by the fact that vue.js instance from the first popup modified the store by setting its own getter/setters, which have now been deleted since the first popup was closed, making the shared state unusable. This seems to be unavoidable, so I decided I'd give vuex a try.
Second attempt
background.js
var store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment: state => state.count++,
}
})
popup.js
browser.runtime.getBackgroundPage().then(bg => {
var store = bg.store;
var vue = new Vue({
el: '#app',
computed: {
count () {
return store.state.count
}
},
methods: {
increment () {
store.commit('increment')
},
}
});
})
popup.html
<div id="app">
<p>{{ count }}</p>
<p>
<button @click="increment">+</button>
</p>
</div>
<script src="vue.js"></script>
<script src="popup.js"></script>
Unfortunately, this doesn't work either. You can open the popup and see the current counter value, but incrementing it doesn't update the view (you need to reopen the popup to see the new value).
When taking the same code but with the store declared in popup.js, the code works as intended so this should work, but for some reason it doesn't
My questions:
- Is vue.js unable to handle this use case at all?
- If so, would other frameworks (angular, react, ...) work here?
Sorry for the delay, I create a node module for it:
https://github.com/MitsuhaKitsune/vuex-webextensions
The module use the webextensions messaging API for sync all store instances on the webextension.
The install are like another vuex plugins, you can check it on the Readme.
If you have any question or feedback just tell me here or on github issues.
这篇关于Web 扩展中的共享 vuex 状态(死对象问题)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
