Vue + Vuexプロジェクトを構築する

Question

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

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

マイmain.jsファイル：

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

私は、これは全くのベストプラクティスのように見えるしていませんので、vuexまたは一般的にを使用した場合、私は私の友情の方法を置くことができるところうまくいけば、誰かが私を伝えることができます。

ありがとうございます。

Answer 1

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からアクセスするゲッターは、突然変異が発生したときに新しい友達と自動的に更新されます。アプリ内の任意のビューでいつでも同じデータを使用でき、現在のデータベースと同じデータであることがわかります。

いくつかのその他のもの：あなたは常に

変異が非同期になることはありませんあなたのVuexストアの状態を参照することができるように

• ゲッターは自動的に、変数としてstateを受けます。操作をフェッチ/更新し、データを更新するだけで突然変異をディスパッチする
• Vue Resourceを使用してサービス（またはリソース）を作成すると、リソースの取得/更新/削除がさらに簡単になります。これらを別々のファイルに入れて、actions.jsにインポートして、データベース検索ロジックを分離した状態に保つことができます。次に、Vue.http.get('/users/1')の代わりにFriendService.get({id: 1})のようなものを書くでしょう。 https://github.com/vuejs/vue-resource/blob/master/docs/resource.md
• Vuexは「時間移動」のためのvue devtoolsで動作します。起こったすべての突然変異のリストを見ることができ、それらを巻き戻したり再実行したりすることができます。デバッグやデータの変更先を確認するのに最適です。