构建 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 管理应用程序中的所有数据。它是前端数据的 "single source of truth"。因此，任何更改应用程序状态的操作（例如添加好友或拒绝好友）都需要通过 Vuex。这通过三种主要功能类型发生，getters、动作和突变。

查看：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 store
突变不应该是异步的。在操作中执行 fetching/updating，然后发送突变以更新您的数据
使用 Vue Resource 创建服务（或资源）将使 fetching/updating/删除资源更加容易。您可以将它们放在单独的文件中，然后将它们导入 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 一起工作 "time-traveling"。您可以查看已发生的每个突变的列表并倒带 them/redo 它们。它非常适合调试和查看数据更改的位置。

构建 Vue + Vuex 项目

Structuring a Vue + Vuex project

javascript

vue.js

vue-resource

vuex