Question

我正在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[]

怎么了？

预先感谢

VueStoreFront：SSR上的模块状态已更新，客户端未更新

0 个答案: