vue はインターフェイスによって取得されたデータを vuex にどのように配置しますか

Vue は、開発者がインタラクティブで動的な Web アプリケーションを構築するのに役立つ人気のある JavaScript フレームワークです。 Vue は、その使いやすさと柔軟性で広く賞賛されています。 Vue は、Vuex と呼ばれるプラグインを提供することで、アプリケーションのデータ状態の管理にも役立ちます。 Vuex は、異なる部分間の同期を管理し、確実に行うために、すべてのアプリケーションの状態を 1 か所に集中管理する状態管理パターンです。

Vue を使用して Web アプリケーションを開発する場合、通常、ビューをレンダリングするためにサーバーからデータを取得する必要があります。このデータは HTTP リクエスト経由で API から取得でき、Vue コンポーネントで使用できます。この場合、Vuex はデータ状態を一元管理して、アプリケーション全体で共有できるようにするのに役立ちます。

今回はAPIから取得したデータをVuexに入れる方法を紹介します。次の手順を使用します。

1. Vuex ストレージを作成する
2. API データを取得して Vuex に保存する
3. 保存されたデータを Vue コンポーネントに使用する

Vuex ストレージの作成

Vuex を使用してデータを保存するには、store.js ファイルを作成する必要があります。 store.js ファイルでは、まず Vue と Vuex をインポートする必要があります。次に、Vue.use(Vuex) を使用して Vuex プラグインを登録する必要があります。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

store.js ファイルに、 Vuex は、共有したい状態を含むインスタンスを保存します。

export const store = new Vuex.Store({
状態: {

data: []

},
変異: {

setData(state, payload) {
  state.data = payload
}

}
})

上記のコードでは、data という名前の状態を定義し、ミューテーションで setData という名前のメソッドを提供します。このメソッドは、データをデータ状態に保存するために使用されます。

次に、Vue コンポーネントで使用するためにストア インスタンスをエクスポートする必要があります。

API データを取得して Vuex に保存する

Vue コンポーネントでは、axios または他の HTTP ライブラリを使用して API からデータを取得できます。この記事では、axios を使用してデータを取得します。

データを取得して Vuex に保存するには、Vue コンポーネントのアクション メソッドを呼び出す必要があります。 store.js ファイルでは、データを受信し、ミューテーションで定義された setData メソッドを呼び出してデータをデータ状態に保存するアクション メソッドを提供します。

以下は、store.js ファイル内の完全なコードです:

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export const store = new Vuex.Store({
状態: {

data: []

},
変異: {

setData(state, payload) {
  state.data = payload
}

},
アクション: {

getData({commit}) {
  axios.get('https://api.example.com/data')
    .then(response => {
      commit('setData', response.data)
    })
}

}
})

上記のコードでは、getData という名前のアクション メソッドを定義します。このメソッドは、axios を使用して https://api.example.com/data アドレスからデータを取得します。取得が成功すると、commit メソッドを使用して setData mutations メソッドを呼び出し、データをデータ状態に保存します。

Vue コンポーネントでの保存されたデータの使用

store.js ファイルで定義された状態は、Vue コンポーネントで使用できます。以下は、store.js ファイル内のデータ状態からデータを取得し、テンプレートに表示するコンポーネントの例です。

7ab6b075cc6c7bcbe15d0b9685c6f1da
dc6dce4a544fdca2df29d5ac0ea9906b

<ul>
  <li v-for="item in data" :key="item.id">
    {{ item.name }}
  </li>
</ul>

16b28748ea4df4d9c2150843fecfba68
3399104e6938bdac11bae5f4688ce7ba

4e07eaec52b67b6abe4024604b22f1f1
import { mapState, mapActions } from 'vuex'

export デフォルト {
計算済み: {

...mapState(['data']),

},
created() {

this.getData()

},
メソッド: {

...mapActions(['getData']),

}
}
2cacc6d41bbb37262a98f745aa00fbf0

上記のコードでは、Vuex が提供する mapState メソッドと mapActions メソッドを使用します。 mapState を使用して、データの状態をコンポーネントの計算されたプロパティにマップします。 mapActions を使用して、getData アクション メソッドをコンポーネントのメソッドにマップします。

コンポーネントが作成されたら、作成したフック関数を呼び出し、その中の getData メソッドを呼び出して、store.js ファイルのデータ状態にデータを読み込みます。取得したデータを v-for 命令でループし、テンプレートに表示できます。

結論

APIから取得したデータをVuexに保存する手順は上記の通りです。 Vuex を使用してアプリケーションの状態を管理し、アプリケーション全体でデータを共有できるようにします。 Vue コンポーネントでは、mapState メソッドと mapActions メソッドを使用して、Vuex に保存されているデータとメソッドにアクセスできます。

以上がvue はインターフェイスによって取得されたデータを vuex にどのように配置しますかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。