Vuex persist работает только после закрытия браузера - PullRequest
Новая
       22

Vuex persist работает только после закрытия браузера

0 голосов
/ 17 апреля 2020

Я разрабатываю расширение chrome, и мне нужно внедрить редактор ярлыков. Во всплывающем окне у меня есть редактор ярлыков, и когда ярлык меняется, в контент-скрипт отправляется сообщение и обновляется Vuex.

Сообщение отправляется правильно, а мутация vuex также вызывается корректно. Теперь проблема в том, что данные, похоже, не реагируют. Я вижу, что данные корректно обновляются в локальном хранилище с помощью vuex-persist, но затем состояние хранилища не обновляется.

После перезапуска браузера загружается правильное состояние (с новым ярлыком).

popup. js

chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    chrome.tabs.sendMessage(tabs[0].id,  {
        id: this.data.id,
        shortcut: this.data.shortcut,
    });
});

content. js

chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
    if (request.hasOwnProperty("id")){
        store.commit("changeShortcut", request)
    }
});

магазин. js

const vuexLocal = new VuexPersistence({
    storage: window.localStorage
})
const store = new Vuex.Store({
    state: {
        shortcuts: shortcuts,
    },
    getters: {
        getField,
    },
    mutations: {
        changeShortcut (state, n) {
            var item = state.shortcuts.find((x) => x.id == n.id);
            item.shortcut = n.shortcut

            state.shortcuts = [item,
            ...state.shortcuts.filter(element => element.id !== n.id)
            ]
        },
        updateField,
    },
    plugins: [vuexLocal.plugin],
})

введен. js (ключ для ярлыков) 

document.addEventListener('keydown', (e) => {
    if(e.target.nodeName.toLowerCase() === "input"){
        return;
    } 
    if (!e.repeat){

        var shortcut = store.state.shortcuts.find(el => el.shortcut == e.key);
        if(shortcut){
            actions[shortcut.f](...(shortcut.params ? shortcut.params : []));
        }
    }
});

Я думаю, что проблема заключается в как я обновил ярлык в мутации, но я пытался использовать различные вещи, такие как Object.assign () или Vue .set ().

...