vue如何將介面所取得的資料放在vuex

Vue是一種流行的JavaScript框架，它可以幫助開發人員建立互動式和動態的網頁應用程式。 Vue從其易用性和靈活性方面得到了廣泛的推崇。 Vue還透過提供一個稱為Vuex的外掛程式來幫助管理應用程式的資料狀態。 Vuex是一個狀態管理模式，它將所有應用程式的狀態集中在一個地方，以便管理並確保它們在不同部分之間的同步。

當使用Vue開發網頁應用程式時，通常需要從伺服器取得資料以渲染視圖。這些資料可以透過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({
state: {

data: []

},
mutations: {

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

#}
})

在上面的程式碼中，我們定義了一個名為data的狀態，並在mutations中提供了一個名為setData的方法，該方法用於將資料儲存在data狀態中。

接下來，我們需要匯出store實例，以便在Vue元件中使用它。

取得API資料並將其儲存在Vuex中

在Vue元件中，我們可以使用axios或其他HTTP庫來從API中取得資料。在本文中，我們將使用axios來取得資料。

為了取得資料並將其儲存在Vuex中，我們需要在Vue元件中呼叫actions方法。在store.js檔案中，我們將提供一個actions方法，該方法將接收資料並呼叫mutations中定義的setData方法將其儲存在data狀態中。

以下是store.js檔案中的完整程式碼：

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

Vue.use(Vuex)

export const store = new Vuex.Store({
state: {

data: []

},
mutations: {

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

},
actions: {

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

}
})

在上面的程式碼中，我們定義了一個名為getData的actions方法。此方法使用axios從https://api.example.com/data位址取得資料。當取得成功後，它將使用commit方法呼叫setData mutations方法，以便將資料儲存在data狀態中。

在Vue元件中使用儲存的資料

在store.js檔案中定義的狀態可以在Vue元件中使用。以下是一個範例元件，該元件將從store.js檔案中的data狀態中取得資料並在範本中顯示它們。

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

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

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

#3f1c4e4b6b16bbbd69b2ee476dc4f83a
import { mapState, mapActions } from 'vuex'

export default {
computed: {

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

},
created() {

this.getData()

},
methods: {

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

}
}
2cacc6d41bbb37262a98f745aa00fbf0

在上面的程式碼中，我們使用了Vuex提供的mapState和mapActions方法。使用mapState，我們將data狀態映射到元件的計算屬性上。使用mapActions，我們將getData actions方法對應到元件的方法中。

當元件建立時，我們將呼叫created鉤子函數，並在其中呼叫getData方法，以便將資料載入到store.js檔案中的data狀態。我們可以將獲取的資料通過v-for指令循環並在模板中顯示。

結論

將從API取得的資料儲存在Vuex中的流程如上所述。我們可以使用Vuex來管理應用程式的狀態，以便在整個應用程式中共享資料。在Vue元件中，我們可以使用mapState和mapActions方法來存取儲存在Vuex中的資料和方法。

以上是vue如何將介面所取得的資料放在vuex的詳細內容。更多資訊請關注PHP中文網其他相關文章！