Error when using preserveState: true

When i call submitQuote() -> which calls the mutation setQuoteResult(); ‘this’ is undefined.

But it works when i remove preserveState: true

any ideas?

import {
  VuexModule, Module, Mutation, Action, getModule,
} from 'vuex-module-decorators';
import { Inject } from 'inversify-props';
import { Quote, QuoteRequest, QuoteResult } from '@/models/quote';
import store from '@/store';
import TYPES from '@/types';
import IApplicationService from '@/services/IApplicationService';

@Module({ dynamic: true, store, name: 'quote', namespaced: true, preserveState: true })
export class QuoteModule extends VuexModule {
  @Inject(TYPES.ApplicationService)
  private applicationService!: IApplicationService;

  quoteError: string = '';

  quote: Quote = new Quote();

  quoteResult: QuoteResult = new QuoteResult();

  @Mutation
  public setQuoteError(error: string): void {
    this.quoteError = error;
  }

  @Mutation
  public setQuote(quote: Quote): void {
    this.quote = quote;
  }

  @Mutation
  public setQuoteResult(result: QuoteResult): void {
    // this is undefined
    this.quoteResult = result;
  }

  @Action
  public async fetchQuote(quoteId: string): Promise<Quote> {
    try {
      const result = await this.applicationService.getQuote(quoteId);
      this.setQuote(result);
      return result;
    } catch (error) {
      this.setQuoteError(error);
    }

    return new Quote();
  }

  @Action({ rawError: true })
  public async submitQuote(request: QuoteRequest): Promise<QuoteResult> {
    try {
      const result = await this.applicationService.submitQuote(request);
      // when calling this mutation
      this.setQuoteResult(result);
      return result;
    } catch (error) {
      this.setQuoteError(error);
    }

    return new QuoteResult();
  }
}

export default getModule(QuoteModule);

export default new Vuex.Store({
  strict: true,
});

[davidsmej88]

Guys, be sure that you have correctly set index.ts. For example:

import Vue from 'vue';
import Vuex from 'vuex'
import VuexPersistence from 'vuex-persist';

Vue.use(Vuex);
const vuexLocal = new VuexPersistence({
  storage: window.localStorage,
});

export default new Vuex.Store({
  state: {},
  plugins: [vuexLocal.plugin],
});

and module like this, when it doesn’t have a initial state and you load the state from the localStorage @Module({ dynamic: true, store: store, name: 'mm', preserveState: localStorage.getItem('vuex') !== null })

[pancake-boy]

i don’t use this lib anymore. maybe easier to just store what u need manually