Vueで外部データを取得する方法

Vue は非常に人気のある JavaScript フレームワークで、エレガントで応答性の高い Web インターフェイスを構築できます。アプリケーションで Vue を使用すると、データをテンプレートにバインドする必要があります。これにより、ページを更新せずに DOM 要素を更新できるようになります。この記事の目的は、Vue が外部データをどのように処理するかを紹介することです。

Vue は、アプリケーション内で再利用可能なコード ブロックを組み合わせることができる「コンポーネント」と呼ばれる概念を提供します。各コンポーネントには独自のデータと動作があり、他のコンポーネントと簡単に対話できます。では、データがコンポーネント内にない場合はどうすればよいでしょうか?

Vue は、外部データを処理する 2 つの主な方法、Prop と Vuex を提供します。

1. Prop

Prop は、Vue のコンポーネント間でデータを転送する方法で、親コンポーネントから子コンポーネントにデータを渡すことができます。子コンポーネントはこのデータを独自のプロパティとして使用し、必要に応じて更新できます。

Prop を使用する場合、コンポーネントで受け取る必要があるデータを宣言する必要があります。これは、コンポーネントに props 属性を追加することで実現できます。以下は、「message」という名前の Prop を受け取る例です:

Vue.component('my-component', {
  props: ['message'],
  template: '<div>{{ message }}</div>'
})

データが使用されるコンポーネントにデータを渡すことができます。たとえば:

<my-component message="Hello, world!"></my-component>

コンポーネントはこの message 属性を認識します。希望のメッセージを表示するために使用できます。

2. Vuex

Vuex は Vue の公式状態管理ライブラリであり、アプリケーション全体でデータを共有できるようになります。 Vuex は、「ストア」と呼ばれる中央リポジトリを使用して、アプリケーションの状態を保存します。コンポーネントはストアから状態を取得し、更新できます。

Vuex を使用する場合、最初にストアを定義する必要があります。これは、アプリケーション状態と更新状態を含むオブジェクトを作成することで実現できます。簡単な例を次に示します。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

コンポーネントで Vuex を使用する場合、最初にストアをインポートする必要があります。これは、次の内容をコンポーネントに追加することで実現できます。

import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['increment'])
  }
}

計算されたプロパティを使用して、ストアから状態を取得できます。たとえば、次のようになります。

<p>Count: {{ count }}</p>

メソッドを使用して、状態、例:

<button v-on:click="increment">Increment</button>

ボタンをクリックすると、increment メソッドを呼び出すとステータスが更新されます。

要約すると、Vue は外部データを処理する 2 つの主な方法、Prop と Vuex を提供します。 Props を使用すると、親コンポーネントから子コンポーネントにデータを渡し、必要に応じて更新することができます。 Vuex を使用すると、アプリケーション全体でデータを共有し、どこにいてもデータを更新できます。特定のアプリケーション シナリオに応じて、外部データを処理する適切な方法を選択できます。

以上がVueで外部データを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。