Issue after register module

[disjfa]

So i mage a plugin for vue and am working on a demo project. So i wanted to add your localstorrage and it works awesome.

My plugin: https://github.com/disjfa/vue-route-timeline / https://disjfa.github.io/vue-route-timeline/ My template: https://github.com/disjfa/kazoo / https://disjfa.github.io/kazoo

The store gets persisted like it would, but my store module in my plugin is not updated with the store. I think it is because your store items gets set before the store.registerModule(moduleName, timelineStore); in my plugin gets called. So the state of my plugin gets reset.

You can check it out by clicking in my app and on the homepage the list grows. But on f5 it's cleaned again. It does gets stored in the localstorage by the way.

If i can help or know where to look i can help.

[alex-oleshkevich]

+1, got same issue. Basically, this issue should be filed to vuex devs.

temporary created own plugin, which adds timeout to let vuex init modules.

import storage from 'localforage';
import merge from 'lodash.merge';

const KEY = 'vuex';

export default async(store) => {
    const savedState = await storage.getItem(KEY);
    setTimeout(f => {
        const newState = merge({}, store.state, savedState);
        store.replaceState(newState);
    }, 50);

    store.subscribe((mutation, state) => {
        storage.setItem(KEY, state);
    });
};

[dhax]

same issue here... any progress on this?

[agonzalezml]

+1

[robinvdvleuten]

Please read the note about localForage. A Vuex / Flux architecture and thereby this plugin cannot handle any asynchronous.

[agonzalezml]

Bad news

[robinvdvleuten]

@agonzalezml please not that it's not an issue with this plugin, it's an issue in how you guys want to use "asynchronously" in your Vuex store.

[disjfa]

Yup, i was also looking into this and how and where to trigger asynchronous mutations. But i can't find where to trigger those in vuex. It's not quite asynch, but just when we register new stores.

But you can easilly save local state of (your own) plugins using localstorrage, that's just some extra lines of code.

[robinvdvleuten]

what about loading your "persisted state" asynchronously before creating the store instance?

[disjfa]

Thats not the issue. The issue is vuex logics.

1. serup app store 1.1 connect your persistedstate on main store state
2. register plugin which resisters own module in the state.

And thus the persisted store is already registered and written so the modules does not know of the persisted state and will not be updated.

import store from './store'; // 1 and thus 1.1
Vue.use(timeline.plugin, { store, ... }); // 2