VueStoreFront: состояние модуля обновляется в SSR, клиент не обновляется - PullRequest
Новая
       57

VueStoreFront: состояние модуля обновляется в SSR, клиент не обновляется

0 голосов
/ 15 октября 2019

Я создаю простой пользовательский модуль в VSF. В хуке afterRegistration я делаю ajax-вызов и обновляю состояние с извлеченными данными. Но когда сайт рендерится и я проверяю с помощью DevTools, состояние возвращается к состоянию по умолчанию?

Я использую VSF 1.10.3

Это мой код 

// index.ts
export const KEY = 'currency';
export const cacheStorage = initCacheStorage(KEY);
export const Currency = createModule({
  key: KEY,
  store: {modules: [{key: KEY, module}]},
  afterRegistration
});

// afterRegistration.ts
export function afterRegistration ({ Vue, config, store, isServer }) {
  AsyncDataLoader.push({
    execute: ({store}) => {
      return new Promise((resolve, reject) => {
        store.dispatch(`${KEY}/getCurrenies`)
          .then(() => resolve());
      })
    }
  })
}

// actions.ts
export const actions: ActionTree<CurrencyState, any> = {
  getCurrenies ({ commit }) {
    const url = `${config.api.url}/api/ext/currency`;
    fetch(url)
      .then(resp => resp.json())
      .then(json => {
        commit(types.SET_CURRENCIES, json.result)
      })
      .catch(console.error)
  }
}

// mutations.ts
export const mutations: MutationTree<any> = {
  [types.SET_CURRENCIES] (state, payload) {
    state = payload
    console.log(state) // state is updated
  }
}

// state.ts
export const state: CurrencyState = {
  available_currency_codes: [],
  base_currency_code: '',
  base_currency_symbol: '$',
  default_display_currency_code: 'USD',
  default_display_currency_symbol: '$',
  exchange_rates: []
};

// CurrencyState.ts
interface ExchangeRates {
  currency_to: string,
  rate: number
}

export interface CurrencyState {
  base_currency_code: string,
  base_currency_symbol: string,
  default_display_currency_code: string,
  default_display_currency_symbol: string,
  available_currency_codes: string[],
  exchange_rates: ExchangeRates[]
}

И файл зарегистрирован в VueStorefrontModule[]

Что может быть не так?

Заранее спасибо

...