构建一个Vue + Vuex项目

Question

我在这里就我的全局函数放置位置感到困惑。在很多例子中，一个main.js文件指向一个应用程序组件，并且它被放置在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。这发生在三个主要的函数类型中，即获取者，动作和变化。

退房：https://github.com/vuejs/vuex/tree/master/examples/shopping-cart/vuex

吸气剂是用来在Vuex从存储数据读取。它们对变化有反应，这意味着如果Vuex数据发生变化，组件中的信息也会更新。你可以把它们放在类似getters.js的地方，这样你就可以将它们导入到你需要的任何模块中。

动作是你直接调用的函数，当用户点击按钮时，可以使用acceptFriendRequest。他们与您的数据库进行交互，然后派遣突变。在这个应用程序中，所有的操作都在actions.js。

所以你可以在你的组件中调用this.acceptFriendRequest(recipient)。这会告诉您的数据库更新朋友状态，然后您会收到确认信息，证明发生了这种情况。那就是当你派发一个突变来更新Vuex中当前用户的朋友列表。

突变更新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(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一起使用“时间旅行”。你可以看到已经发生的每个突变的列表，并将它们倒回/重做它们。调试和查看数据正在更改的位置非常适合。