Vue.js アプリケーションでバックエンドによって提供されるインターフェイスを使用すると、サーバーと通信し、データを取得および更新できます。この記事では、Vue のバックエンド インターフェイスの使用方法を紹介します。
まず、HTTP リクエストを行うための JavaScript ライブラリである Axios ライブラリをインストールする必要があります。ターミナルで次のコマンドを実行します:
<code>npm install axios</code>
次に、Vue.js ファイルに Axios をインポートします:
<code class="js">import axios from 'axios'</code>
HTTP リクエストを作成するには、 axios
オブジェクトを使用してください。
<code class="js">axios.get('api/todos') .then(response => { // 处理成功的响应 }) .catch(error => { // 处理请求错误 })</code>
get
メソッドは GET リクエストの送信に使用され、post
メソッドは POST リクエストの送信に使用されます。すぐ。
データをバックエンドに渡すには、data
オプションを使用します:
<code class="js">axios.post('api/todos', { title: '学习 Vue.js' }) .then(response => { // 处理成功的响应 }) .catch(error => { // 处理请求错误 })</code>
成功した応答には、バックエンドによって返されたデータを含む data
属性が含まれます。
<code class="js">axios.get('api/todos') .then(response => { const todos = response.data; // 使用 todos 数据 }) .catch(error => { // 处理请求错误 })</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 => { commit('setTodos', response.data) }) .catch(error => { // 处理请求错误 }) } }, mutations: { setTodos(state, todos) { state.todos = todos } } })</code>
その後、#mapState および
mapActions ヘルパー関数をVuex ストレージにアクセスするコンポーネント:
<code class="js">import { mapState, mapActions } from 'vuex' export default { computed: { ...mapState(['todos']) }, methods: { ...mapActions(['getTodos']) } }</code>
以上がVue はバックエンドによって提供されるインターフェイスをどのように使用しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。