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

问题描述

在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)
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）