在 Vue.js 應用中使用后端提供的接口可以讓你與服務器通信，獲取和更新數據。本文將介紹如何在 Vue 中使用后端接口。

首先，你需要安裝 Axios 庫，這是一個用于發起 HTTP 請求的 JavaScript 庫。在終端中執行以下命令：

<code>npm install axios</code>

然后，在你的 Vue.js 文件中導入 Axios：

<code class="js">import axios from 'axios'</code>

要創建 HTTP 請求，請使用 對象：

<code class="js">axios.get('api/todos')
  .then(response =&gt; {
    // 處理成功的響應
  })
  .catch(error =&gt; {
    // 處理請求錯誤
  })</code>

方法用于發送 GET 請求， 方法用于發送 POST 請求，以此類推。

要傳遞數據到后端，請使用 選項：

<code class="js">axios.post('api/todos', {
  title: '學習 Vue.js'
})
  .then(response =&gt; {
    // 處理成功的響應
  })
  .catch(error =&gt; {
    // 處理請求錯誤
  })</code>

成功響應中包含 屬性，其中包含后端返回的數據。

<code class="js">axios.get('api/todos')
  .then(response =&gt; {
    const todos = response.data;
    // 使用 todos 數據
  })
  .catch(error =&gt; {
    // 處理請求錯誤
  })</code>

Vuex 是一種狀態管理庫，可以幫助你在 Vue.js 應用中管理和共享數據。你可以使用 Vuex 來管理從后端獲取的數據，并通過組件訪問它。

要使用 Vuex，你需要創建一個 Vuex 存儲：

<code class="js">import Vuex from 'vuex'
import { createStore } from 'vuex'

const store = createStore({
  state: {
    todos: []
  },
  actions: {
    getTodos({ commit }) {
      axios.get('api/todos')
        .then(response =&gt; {
          commit('setTodos', response.data)
        })
        .catch(error =&gt; {
          // 處理請求錯誤
        })
    }
  },
  mutations: {
    setTodos(state, todos) {
      state.todos = todos
    }
  }
})</code>

然后，你可以在組件中使用 和 輔助函數來訪問 Vuex 存儲：

<code class="js">import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['todos'])
  },
  methods: {
    ...mapActions(['getTodos'])
  }
}</code>