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 'URL'; 
# It got <h1></h1>, 
# but I want <h1>Something here</h1> 

は、どのように私はそれがサーバ側でのCMSのコンテンツデータをレンダリングすることができることを確認するのですか？

Answer 1

vue-hackernews-2.0の例によれば、src/server-entry.jsは、現在のルートコンポーネントで​​の機能を検出します。

したがって、​​関数を現在のルートコンポーネントに追加して、データをVuexストアに保存してください。

<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> 

Answer 2

あなたは、コード内で次の変更を行う必要があります。ここでは

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

は作業fiddleです。