javascript - Structuring a Vue + Vuex project -

i kind of confused here on place global functions. in lot of examples main.js file points app component , placed somewhere within html. workflow fine me if contain logic within app component. combining components laravel functionality not work me.

currently main.js file contains bunch of methods need have access anywhere in app. these methods don't contain broadcasting events can placed anywhere long vue-resource instance.

my main.js file:

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

hopefully can tell me place friendship methods if use vuex or in general since not seem best practice @ all.

thank you.

vuex manages of data in application. it's "single source of truth" data on front-end. therefore, changes state of application, such adding friend, or denying friend, needs flow through vuex. happens through 3 main function types, getters, actions, , mutations.

check out: https://github.com/vuejs/vuex/tree/master/examples/shopping-cart/vuex

getters used fetch data storage in vuex. reactive changes, meaning if vuex data changes, information in component updated well. can put these in getters.js can import them in module need them in.

actions functions call directly, ie. acceptfriendrequest when user clicks button. interact database, , dispatch mutations. in app, of actions in actions.js.

so you'd call this.acceptfriendrequest(recipient) in component. tell database update friend status, confirmation happened. that's when dispatch mutation updates current users' list of friends within vuex.

a mutation updates data in vuex reflect new state. when happens, data retrieving in getter updated well. here example of entire flow:

import {addfriend} './actions.js'; import {friends} './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 new friend       })   } } 

getters.js

export default {   friends(state) {     return state.friends;   } } 

so of these organized own files, , can import them in component need. can call this.addfriend(friend) component, , getter accessed this.friends automatically update new friend when mutation happens. can use same data in view in app , know current database.

some misc stuff:

• getters automatically receive state variable, can reference state of vuex store
• mutations should never asynchronous. fetching/updating in actions , dispatch mutations update data
• creating services (or resources) using vue resource make fetching/updating/deleting resources easier. can put these in separate files , import them in actions.js keep database retrieval logic separated. you'd writing friendservice.get({id: 1}) instead of vue.http.get('/users/1'). see https://github.com/vuejs/vue-resource/blob/master/docs/resource.md
• vuex works vue devtools "time-traveling". can see list of every mutation has taken place , rewind them/redo them. it's great debugging , seeing data being changed.