43

現在、新しい Vue.js アプリケーションに取り組んでいます。バックエンド データベースへの API 呼び出しに大きく依存しています。

コンポーネント間の共有データを管理するため、多くの場合に Vuex ストアを使用します。github で他の Vue プロジェクトを見ると、すべてのアクション、状態などを処理するファイルを含む特別な vuex ディレクトリが表示されます。そのため、コンポーネントが API を呼び出す必要がある場合、vuex ディレクトリのアクション ファイルが含まれます。

しかし、たとえばメッセージの場合、これらのデータは 1 つの特定のビューでのみ重要であるため、Vuex を使用したくありません。ここでコンポーネント固有のデータを使用したいと思います。しかし、ここに私の問題があります: 私はまだ自分の API を照会する必要があります。しかし、Vuex アクション ファイルを含めるべきではありません。そのため、新しいアクション ファイルを作成する必要があります。このようにして、vuex と単一コンポーネントの API アクションを含む特定のファイルを作成します。

これをどのように構成すればよいですか？vuex データとコンポーネント固有のデータの両方のアクションを処理する新しいディレクトリ 'api' を作成しますか? それとも分ける？

4

3 に答える 3

34

API呼び出しを行うためのHTTPクライアントとしてaxiosを使用していますgateways。フォルダーにフォルダーを作成srcし、各バックエンドにファイルを配置して、次のようにaxiosインスタンスを作成しました

myApi.js

import axios from 'axios'
export default axios.create({
  baseURL: 'http://localhost:3000/api/v1',
  timeout: 5000,
  headers: {
    'X-Auth-Token': 'f2b6637ddf355a476918940289c0be016a4fe99e3b69c83d',
    'Content-Type': 'application/json'
  }
})

コンポーネントで、次のように API からデータをフェッチする関数を使用できます。

methods: {
 getProducts () {
     myApi.get('products?id=' + prodId).then(response =>  this.product = response.data)
  }
}

同様に、これを使用して vuex ストアのデータを取得することもできます。

編集済み

専用のvuex モジュールで製品関連データを維持している場合、コンポーネントのメソッドからアクションをディスパッチできます。これにより、バックエンド API が内部的に呼び出され、ストアにデータが入力されます。コードは次のようになります。

コンポーネント内のコード:

methods: {
 getProducts (prodId) {
     this.$store.dispatch('FETCH_PRODUCTS', prodId)
  }
}

vuex ストアのコード:

import myApi from '../../gateways/my-api'
const state = {
  products: []
}

const actions = {
  FETCH_PRODUCTS: (state, prodId) => {
    myApi.get('products?id=' + prodId).then(response => state.commit('SET_PRODUCTS', response))
  }
} 

// mutations
const mutations = {
  SET_PRODUCTS: (state, data) => {
    state.products = Object.assign({}, response.data)
  }
}

const getters = {
}

export default {
  state,
  mutations,
  actions,
  getters
}
于 2016-11-26T07:53:50.200 に答える
6

注: vue-resource は廃止されました! Axios など、別のものを使用します。

私は主に Vue Resource.I を使用していますservices。ディレクトリを作成し、PostService.js などのエンドポイントへのすべての接続を配置します。

import Vue from 'vue'

export default {
  get(id) {
    return Vue.http.get(`/api/post/${id}`)
  },
  create() {
    return Vue.http.post('/api/posts') 
  }
  // etc
}

次に、ファイルでそのサービスをインポートし、サービスファイルからメソッドを呼び出すメソッドを作成します

SomeView.vue

import PostService from '../services/PostService'

export default {
  data() {
    item: []
  },
  created() {
    this.fetchItem()
  },
  methods: {
    fetchItem() {
      return PostService.get(to.params.id)
        .then(result => {
          this.item = result.json()
        })
    }  
  }
}
于 2016-11-26T11:04:14.590 に答える