web-dev-qa-db-ja.com

Vue + Vuexプロジェクトの構造化

ここでは、グローバル関数をどこに配置するかについて少し混乱しています。多くの例では、main.jsファイルがアプリコンポーネントを指しており、これはhtml内のどこかに配置されています。このワークフローは、このアプリコンポーネント内にすべてのロジックを単純に含める場合は問題ありません。しかし、私はコンポーネントをLaravel機能と組み合わせているので、これは私には機能しません。

現在、私のmain.jsファイルには、アプリのどこからでもアクセスできるようにする必要のある一連のメソッドが含まれています。これらのメソッドにはブロードキャストイベントが含まれていないため、vue-resourceインスタンスを取得する限り、どこにでも効果的に配置できます。

私のmain.jsファイル：

https://github.com/stephan-v/BeerQuest/blob/develop/resources/assets/js/main.js

うまくいけば、私がvuexを使用する場合、または一般的に、これはベストプラクティスとはまったく思えないため、友情の方法をどこに配置できるかを誰かに教えてもらえます。

ありがとうございました。

javascriptvue.jsvue-resourcevuex
14
Stephan-v

Vuexは、アプリケーション内のすべてのデータを管理します。これは、フロントエンドのデータの「信頼できる唯一の情報源」です。したがって、友達を追加したり、友達を拒否したりするなど、アプリケーションの状態を変更するものはすべて、Vuexを通過する必要があります。これは、3つの主要な関数タイプ、ゲッター、アクション、およびミューテーションによって発生します。

チェックアウト： https://github.com/vuejs/vuex/tree/master/examples/shopping-cart/vuex

ゲッターは、Vuexのストレージからデータをフェッチするために使用されます。これらは変更に反応します。つまり、Vuexデータが変更されると、コンポーネントの情報も更新されます。これらを_getters.js_のようなものに入れて、必要なモジュールにインポートできるようにすることができます。

アクションは、直接呼び出す関数です。 acceptFriendRequestユーザーがボタンをクリックしたとき。それらはデータベースと相互作用し、ミューテーションをディスパッチします。このアプリでは、すべてのアクションは_actions.js_にあります。

したがって、コンポーネントでthis.acceptFriendRequest(recipient)を呼び出します。これにより、データベースにフレンドステータスを更新するように指示され、これが発生したという確認が返されます。それは、Vuex内の現在のユーザーの友達リストを更新するミューテーションをディスパッチするときです。

ミューテーションにより、Vuexのデータが更新され、新しい状態が反映されます。これが発生すると、ゲッターで取得しているデータも更新されます。フロー全体の例を次に示します。

_import {addFriend} from './actions.js';
import {friends} from './getters.js';
new Vue({
  vuex:{
    getters:{
      friends
    }
  },
  methods:{
    addFriend
  }
}
_

store.js：

_export default {
  state:{
    friends: []
  },
  mutations:{
    ADD_FRIEND(state, friend) {
      state.friends.Push(friend);
    }
  }
}
_

actions.js：

_export default {
  addFriend(friend){
    Vue.http.post('/users/1/friends',friend)
      .then((response)=>{
        dispatch("ADD_FRIEND", response) //response is the new friend
      })
  }
}
_

getters.js

_export default {
  friends(state) {
    return state.friends;
  }
}
_

したがって、これらはすべて独自のファイルに編成されており、必要な任意のコンポーネントにインポートできます。任意のコンポーネントからthis.addFriend(friend)を呼び出すことができ、_this.friends_からアクセスされるゲッターは、ミューテーションが発生したときに新しいフレンドで自動的に更新されます。アプリのどのビューでも同じデータをいつでも使用でき、それがデータベースで最新であることを知ることができます。

いくつかの雑多なもの：

  • ゲッターは自動的にstateを変数として受け取るため、Vuexストアの状態をいつでも参照できます。
  • 突然変異は決して非同期であってはなりません。アクションでフェッチ/更新を行い、データを更新するためだけにミューテーションをディスパッチします
  • _Vue Resource_を使用してサービス（またはリソース）を作成すると、リソースのフェッチ/更新/削除がさらに簡単になります。これらを別々のファイルに入れて_actions.js_にインポートし、データベース検索ロジックを分離しておくことができます。次に、FriendService.get({id: 1})の代わりにVue.http.get('/users/1')のようなものを記述します。 https://github.com/vuejs/vue-resource/blob/master/docs/resource.md を参照してください
  • Vuexはvue devtools for "time-traveling"で動作します。発生したすべてのミューテーションのリストを表示し、それらを巻き戻し/やり直します。デバッグやデータの場所の確認に最適です。かわった。
25
Jeff