Question

在Nuxt应用程序中，我正在使用fetch()加载API资源（产品），然后将其提交到Vuex商店。由于某些原因，页面加载后商店值将被覆盖。

为进一步说明，我可以看到Nuxt向后端（Rails）请求资源，接收到正确的响应，并将其提交给商店。正确的资源会显示一秒钟（也在服务器端的控制台中）。但是，当页面完全呈现后，资源将被先前的资源替换。

下面的我的代码。真的没有什么其他的了。 Product.vue的子组件纯粹显示传递给它们的数据。

我没有使用任何Vuex Persistance（已删除它，因为我认为这会导致问题）。但是，如果我清除浏览器应用程序数据，该问题将立即消失。请注意，本地存储区说存储了0个字节...

==

product.vue（Nuxt页面）

import { mapState } from 'vuex'

export default {
  name: 'Product',
  async fetch({ store, params }) {
    await store.dispatch('product/show', params.pathMatch)
  },
  computed: mapState({
    product: (state) => state.product.current,
    productImages: (state) => state.product.current.master.images || []
  })
}

product.js（Vuex商店）

import * as MutationTypes from './mutation-types'

const state = () => ({
  current: {}
})

const mutations = {
  [MutationTypes.CATALOG_SET_CURRENT_PRODUCT](state, payload) {
    console.log(payload) <-- Correct payload arrives
    state.current = payload
  }
}

...

const actions = {
  async show({ commit }, path) {
    const slug = path.replace(/^\/+|\/+$/g, '')
    const product = await this.$repositories.product.get(slug)
    commit(MutationTypes.CATALOG_SET_CURRENT_PRODUCT, product)
  }
}

水化/页面加载后，客户端的SSR状态（vuex）被覆盖

0 个答案: