15

我对在哪里放置我的全局函数有点困惑。在很多示例中，main.js 文件指向一个应用程序组件，它位于 html 中的某个位置。如果我只是在这个应用程序组件中包含我的所有逻辑，那么这个工作流程对我来说会很好。但是我将组件与 Laravel 功能相结合，所以这对我不起作用。

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

我的 main.js 文件：

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

希望有人能告诉我，如果我要使用 vuex 或一般情况下，我可以将我的友谊方法放在哪里，因为这似乎根本不是最佳实践。

谢谢你。

4

1 回答 1

26

Vuex 管理应用程序中的所有数据。它是前端数据的“单一事实来源”。因此，任何改变应用程序状态的事情，例如添加朋友或拒绝朋友，都需要通过 Vuex。这通过三种主要的函数类型发生，getter、action 和 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
  }
}

商店.js：

export default {
  state:{
    friends: []
  },
  mutations:{
    ADD_FRIEND(state, friend) {
      state.friends.push(friend);
    }
  }
}

动作.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 将自动更新为新朋友。您始终可以在应用程序的任何视图中使用相同的数据，并且知道它是您数据库中的最新数据。

一些杂项：

  • getter 自动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 一起用于“时间旅行”。您可以查看已发生的每个突变的列表并倒带/重做它们。它非常适合调试和查看数据在哪里被更改。
于 2016-06-28T11:27:29.210 回答