2

サーバー側のレンダリングで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 コンテンツ データをレンダリングできることを確認するにはどうすればよいですか?

4

2 に答える 2

3

vue-hackernews-2.0 の例によると、 src/server-entry.jspreFetchは現在のルート コンポーネントの関数を検出します。

そのため、現在のルート コンポーネントに関数を追加しpreFetch、データを 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>
于 2016-11-12T12:50:16.380 に答える