15

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

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

私の main.js ファイル:

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

これはベスト プラクティスとはまったく思えないため、vuex を使用する場合、または一般的に、フレンドシップ メソッドをどこに配置できるかを誰かが教えてくれることを願っています。

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

4

1 に答える 1

26

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);
    }
  }
}

アクション.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 と連携します。発生したすべての変更のリストを表示し、それらを巻き戻し/やり直すことができます。データが変更されている場所をデバッグして確認するのに最適です。
于 2016-06-28T11:27:29.210 に答える