VueJS服务器端渲染：计算属性在存储中未看到更改

Question

我正在尝试让服务器端渲染在VueJS中工作。

我一直在关注官方文档，我正在尝试使用axios来实现这个示例。endpoint是正确的，数据确实显示在突变中。

https://ssr.vuejs.org/guide/data.html

我还找到了这个页面，并尝试了其中的大多数示例，包括使用getters、vuex mapState、mapGetter等：

vue。js 2如何从vuex查看存储值

这里是存储/索引。js：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

import { fetchPage } from './api'

export function createStore () {
    return new Vuex.Store({
        strict: true,

        state: () => ({
            res: {}
        }),

        actions: {
            actXY ({ commit }, page) {
                fetchPage('homepage').then((item) => {
                    commit('mutXY', { page, item });
                }).catch(error => {
                    throw new Error(`Store ${error}`);

                })
            }
        },

        mutations: {
            mutXY (state, { page, item }) {
                Vue.set(state.res, page, item);
                console.log(state.res.homepage.data)

            }
        },

        getters: {
            getXY (state) {
                return state.res
            }
        }
    })
}

控制台日志显示了正确的信息，这意味着axiosendpoint正在工作并更新状态对象。最初，我试图调用变异，但后来我尝试调用getter。不幸的是，getter中没有更新新数据，因此当然，组件中没有显示任何新数据。

这是主页。vue：

<template>
  <div v-if="htmlData">{{ JSON.stringify(htmlData) }}</div>
  <div v-else>loading?</div>
</template>

<script>
export default ({
    name: 'homepage',

    computed: {
        htmlData () {
            console.log("computed = " + JSON.stringify(this.$store.state.res));
            console.log(this.$store.getters.getXY);
            return this.$store.getters
            // return this.getQuery()
        }
    },

    serverPrefetch () {
        return this.getData()
    },

    mounted () {
        console.log("in mounted")
        if (!this.item) {
            this.getData()
        }
    },

    methods: {
        getData () {
            return this.$store.dispatch('actXY', 'homepage')
        }
    }
})

</script>

如前所述，htmlData将显示：

{"getXY":{}}

是的，我在getter中尝试了许多其他的方法来返回store项，，但是没有任何效果。

除了上面链接中的内容外，我还查看了配置文件的变化，我尝试添加async来存储/actions、getData（）等。

我还试图在组件中直接调用axios，但没有成功。

由于这个项目已经在VueJS中或多或少地完成了，我正在转换为SSR，所以我删除了package.json的所有内容，并重新安装了每个包，希望可能是某个旧的vue包引起了冲突。

我还尝试了从官方文档中分离存储代码，并尝试了路由编写方式的变化。什么都不管用。

我想我应该添加运行当前代码时打印语句显示的内容：

computed = undefined
computed mm  = undefined
getter = {}
computed get  = {"getXY":{}}
{
  title: 'Home'...}

组件中的计算属性在设置突变之前运行。这导致在更新突变之前调用getter。同样，如果我试图直接从组件调用对res的更改，则在调用和呈现存储时没有任何突变。

这是我试图运行的代码的一个副本：https://github.com/dt1/vue-ssr-attempt

（我找到了答案。我已经用对我有效的方法更新了回购协议，下面对我的解决方案进行了解释）




Answer 1

匿名用户

我的问题是为什么调用this.getData（）挂载？

如果我正确理解了这个过程，当您调用服务器端渲染时，您正试图在安装vue组件之前渲染超文本标记语言。如果你调用this.getData（）创建而不是挂载，它会工作吗？

我会尝试的其他事情：

1. 硬编码htmlData组件中的值，以检查它是否会呈现
2. 如果工作，硬编码htmlData值在存储和检查组件是否可以获取该存储数据和渲染正确太
3. 之后，通过组件的调度从服务器获取htmlData，看看它是否工作。
4. 如果（3）不起作用，尝试将htmlData推送到仅在准备好htmlData时才创建的子组件，通过props将htmlData发送到子组件

Answer 2

开箱即用的Vue.js没有SSR。在您的示例中，您可以获取客户端上的数据。

请尝试以下商店示例：

export default new Vuex.Store({
  strict: true,
  state: {
    res: null
  },
  getters: {
    getXY(state) {
      return state.res;
    }
  },
  mutations: {
    mutXY(state, payload) {
      state.res = payload;
    }
  },
  actions: {
    actXY: function(store) {
      fetchPage("homepage")
        .then(res => {
          store.commit("mutXY", res);
        })
        .catch(error => {
          throw new Error(`Store ${error}`);
        });
    }
  }
});

您可以在组件中获取如下数据：

  computed: {
    htmlData() {
      return this.$store.getters.getXY;
    }
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      return this.$store.dispatch("actXY", "homepage");
    }
  }

Answer 3

首先storeData（）=

然后返回这个$百货商店状态项目。主页数据=