Question

我对这里放置全局函数感到困惑。在很多示例中，main.js文件指向应用程序组件，并将其放在html中的某个位置。这个工作流程对我来说很好。如果我只是简单地包含我在这个app组件中的所有逻辑。但是我将组件与Laravel功能结合起来，所以这对我不起作用。

目前，我的main.js文件包含一系列方法，我需要从我的应用程序中的任何位置进行访问。这些方法不包含任何广播事件，因此只要它们获得vue资源实例，它们就可以有效地放置在任何地方。

我的main.js文件：

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

希望有人可以告诉我，如果我使用vuex或一般情况下我可以放置友谊方法，因为这似乎不是最好的做法。

谢谢。

Answer 1

Vuex管理应用程序中的所有数据。它是一个真正的单一来源＆＃34;用于前端的数据。因此，任何改变应用程序状态的内容（例如添加好友或拒绝朋友）都需要流经Vuex。这通过三种主要功能类型，即getter，actions和mutation进行。

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

Getter用于从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访问的getter将在发生突变时自动与新朋友一起更新。您始终可以在应用程序的任何视图中使用相同的数据，并且知道它对您的数据库来说是最新的。

一些错误的东西：

getters自动接收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合作，为时间旅行＆＃34 ;.您可以看到已发生的每个突变的列表，并回放它们/重做它们。它非常适合调试和查看数据的更改位置。

构建Vue + Vuex项目

1 个答案: