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狀態中取得資料並在範本中顯示它們。

#<script><br> import { mapState, mapActions } from 'vuex'</p><p>export default {<br> computed: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>...mapState(['data']),</pre><div class="contentsignin">登入後複製</div></div><p>},<br> created() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>this.getData()</pre><div class="contentsignin">登入後複製</div></div><p>}, <br> methods: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>...mapActions(['getData']),</pre><div class="contentsignin">登入後複製</div></div><p>}<br>}<br></script>

在上面的程式碼中，我們使用了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中文網其他相關文章！