Vuex-module-decorators: Values are flushed on page load

[jadedarko]

When using a plugin that stores in local storage, it looks like the class instantiation overwrites the stored values on page load.

Do you have an example that keeps those values after page reload etc.?

[championswimmer]

Can you show an example of code what you're saying ? (as in are you using dynamic or not, and when is the decorator required vs when is the storage plugin required)

[JohnCampionJr]

I wonder if this is the same as the issue I'm having....Can you see my repo in #44 ?

This commit:
https://github.com/JohnCampionJr/vue-typescript-test/tree/d6ce5a2875cc61d6295741e40b5156d0ffe7013e

[JohnCampionJr]

Submitted PR #47 with failing test...

[jadedarko]

It might be the same issue.
It doesn't seem to matter if I use dynamic or not.
I've tried it with vue-persistedstate and vue-persist too.

I can see that the values are there in localstorage, but they are replaced with the initial values on page reload.

import Vue from 'vue';
import Vuex from 'vuex';
import VuexPersistence from 'vuex-persist';
import {Module, VuexModule, Mutation, Action, getModule} from 'vuex-module-decorators';

Vue.use(Vuex);

interface RootState {
  user: UserState;
}

export const store = new Vuex.Store<RootState>({
  plugins: [new VuexPersistence().plugin],
});

export interface UserState {
  token: string;
  user: object;
}

@Module({dynamic: true, store, name: 'user', namespaced: true})
class UserModule extends VuexModule implements UserState {
  public token = '';
  public user = {};

  get authHeader() {
    return this.token === '' ? {} : { Authorization: `Token ${this.token}` };
  }

  @Mutation
  public setSession(data: {token: string, user: object}) {
    this.token = data.token;
    this.user = data.user;
  }

  @Action({commit: 'setSession'})
  public async login(payload: {email: string, password: string}) {
    const data = (await requests.post('auth/login/', payload)).data;
    return {token: data.token || '', user: data.user};
  }

  @Action({commit: 'setSession'})
  public async logout() {
    return {token: '', user: {}};
  }
}

export const User = getModule(UserModule);

[JohnCampionJr]

I can confirm I have the same problem when used with dynamic modules, but it works fine with manually registered modules for me.

[jadedarko]

Another trial confirms this; I'm not sure what I was doing before but it's 100% perfect if you're not using dynamic modules.

[TheYves]

Any updates on this? Or has someone an example of how to create non-dynamic modules? Thanks in advance.

[dnsritch]

https://github.com/championswimmer/vuex-module-decorators/issues/167#issuecomment-572339242

[douglasg14b]

Was this ever resolved? Dynamic modules do not seem to work with vuex-persist.

The state is stored, but upon a refresh the state is wiped from localStorage, and no state is rehydrated for the module.