目前我的main.js文件包含一些方法,我需要从我的应用程序的任何地方访问.这些方法不包含任何广播事件,只要他们获得vue资源实例,它们就可以有效地放置在任何地方.
我的main.js文件：
https://github.com/stephan-v/BeerQuest/blob/develop/resources/assets/js/main.js
希望有人可以告诉我,如果我使用vuex或一般来说,我可以放置我的友谊方法,因为这根本不是最好的做法.
谢谢.
解决方法
退房：https://github.com/vuejs/vuex/tree/master/examples/shopping-cart/vuex
Getter用于从Vuex中的存储中获取数据.它们对变化无反应,意味着如果Vuex数据发生变化,组件中的信息也会更新.您可以将它们放在像getters.js这样的东西中,以便您可以将它们导入到需要它们的任何模块中.
动作是直接调用的函数,即. acceptFriendRequest当用户点击按钮时.它们与您的数据库进行交互,然后调度突变.在这个应用程序中,所有操作都在actions.js中.
所以你可以在你的组件中调用this.acceptFriendRequest(收件人).这将告诉您的数据库更新朋友的状态,然后您得到确认,这发生了.那就是当你发送更新当前用户的Vuex中的朋友列表的突变时.
A突变更新Vuex中的数据以反映新状态.当这种情况发生时,您在getter中检索的任何数据也会更新.以下是整个流程的一个例子：
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(朋友),然后从this.friends访问的getter将在发生变化时自动更新新朋友.您可以随时在应用程序的任何视图中使用相同的数据,并且知道它与您的数据库最新.
一些杂物：
> getter自动接收状态作为一个变量,所以你可以随时引用你的Vuex存储的状态
突变不应该是异步的.取得/更新动作,然后派发突变只是为了更新您的数据
使用Vue资源创建服务(或资源)将使获取/更新/删除资源更加容易.您可以将它们放在单独的文件中,并将它们导入到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配合使用“时间旅行”.您可以看到已经发生的每个突变的列表,并重新播放/重做.调试和查看数据被更改是非常好的.
