在 Vue 中使用服务器端渲染时异步数据更改

Question

我想在服务器端渲染中使用Vue，但是模板中的内容数据必须从其他CMS服务器请求。

<template>
  <h1>{{ content.heading }}</h1>
</template>

<script>
  export default {
    data() {
      return {
        content: {
          heading: ''
        }
      }
    },
    created() {
      axios
        .get(CONTENT_RESOURCE)
        .then(content => this.content = content);
    }
  }
</script>

由于axios.get是异步请求，服务器会在请求完成前发送空内容。

使用curl请求内容：

curl 'URL';
# It got <h1></h1>,
# but I want <h1>Something here</h1>

如何确保它可以在服务器端使用 CMS 内容数据呈现？

Answer 1

您必须对代码进行以下更改：

var demo = new Vue({
    el: '#demo',
    data:{
         content : {heading: ""}
    },
    beforeMount() {
      var self = this;
      setTimeout(function(){
          self.content.heading = "HI"
      }, 100)
    }
})

这是一个有效的 fiddle。

Answer 2

根据vue-hackernews-2.0 example, src/server-entry.js会检测当前路由组件中的preFetch函数

所以，只需要在当前路由组件中添加一个preFetch函数，将数据保存到Vuex store即可。

<template>
  <h1>{{ content.heading }}</h1>
</template>

<script>
  const fetchContent = store => 
    axios
      .get(CONTENT_RESOURCE)
      .then(content => store.dispatch('SAVE_CONTENT', content));

  export default {
    computed: {
      content() {
        return this.$store.YOUR_CONTENT_KEY_NAME
      }
    },
    preFetch: fetchContent,   // For server side render
    beforeCreate() {          // For client side render
      fetchContent(this.$store);
    }
  }
</script>

在 Vue 中使用服务器端渲染时异步数据更改

Async data change when using server side render in Vue

javascript

vue.js

server-side-rendering

vue-router