2

VueJS サーバー側のレンダリングをテストするために、いくつかのことを理解しようとしています。このプロジェクトのボイラープレートとして、最新のVueJS Hackernews 2.0を使用しました。

現在、私はこれにこだわっています：

サーバーは を使用してデータをプリフェッチしますpreFetch。すべて良い。ユーザーがこのコンポーネントにルーティングすると、beforeRouteEnter関数内で同じ関数が呼び出されます。すべて良い。

ただし、ユーザーが初めてロードすると、preFetchData関数は 2 回呼び出されます。何度preFetchも何度もbeforeRouteEnter。

これは、Vue Router がまさにそのように機能するため、理にかなっています。preFetchサーバー上で実行され、クライアントで Vue がレンダリングされるとすぐに、beforeRouteEnterが呼び出されます。

しかし、データはサーバー側のレンダリング機能から既にストアにあるため、最初のロードで Vue にこれを 2 回実行させたくありませんpreFetch。

そのコンポーネントが常に で API 呼び出しを行うようにしたいので、データが既にストアにあるかどうかを確認できませんbeforeRouteEnter。サーバーからの最初のレンダリング時だけではありません。

このコンテキストで一度だけデータを取得する方法は?

  <template>
    <div class="test">
        <h1>Test</h1>
      <div v-for="item in items">
        {{ item.title }}
      </div>
    </div>
  </template>

  <script>
  import store from '../store'

  function preFetchData (store) {
    return store.dispatch('GET_ITEMS')
  }

  export default {
    beforeRouteEnter (to, from, next) {
      // We only want to use this when on the client, not the server
      // On the server we have preFetch
      if (process.env.VUE_ENV === 'client') {
        console.log('beforeRouterEnter, only on client')
        preFetchData(store)
        next()
      } else {
        // We are on the server, just pass it
        next()
      }
    },
    name: 'test',
    computed: {
      items () {
        return this.$store.state.items
      }
    },
    preFetch: preFetchData // Only on server
  }
  </script>

  <style lang="scss">
  .test {
    background: #ccc;
    padding: 40px;

    div {
      border-bottom: 1px red solid;
    }
  }
  </style>

上記では、API 呼び出しはstore.dispatch('GET_ITEMS')

4

4 に答える 4

0

このページのデータが既に読み込まれていることを示す変数をストアに設定します。その変数を読んで、ajax リクエストを呼び出す必要があるかどうかを確認してください。

于 2017-01-12T18:54:15.203 に答える