javascript - 构建 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。这通过三种主要函数类型、 setter/getter 、 Action 和突变发生。

checkout :https://github.com/vuejs/vuex/tree/master/examples/shopping-cart/vuex

Getter 用于从 Vuex 的存储中获取数据。它们对变化有反应，这意味着如果 Vuex 数据发生变化，组件中的信息也会更新。您可以将它们放在 getters.js 之类的文件中，这样您就可以将它们导入到您需要它们的任何模块中。

Action 是您直接调用的函数，即。 acceptFriendRequest 当用户点击按钮时。它们与您的数据库交互，然后发送突变。在此应用中，所有操作都在 actions.js 中。

所以你会在你的组件中调用 this.acceptFriendRequest(recipient)。这会告诉您的数据库更新 friend 状态，然后您会收到确认信息。那就是当你发送一个突变来更新 Vuex 中当前用户的好友列表时。

突变会更新 Vuex 中的数据以反射(reflect)新状态。发生这种情况时，您在 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);
    }
  }
}

Action .js:

export default {
  addFriend(friend){
    Vue.http.post('/users/1/friends',friend)
      .then((response)=>{
        dispatch("ADD_FRIEND", response) //response is the new friend
      })
  }
}

getter.js

export default {
  friends(state) {
    return state.friends;
  }
}

因此所有这些都被组织到它们自己的文件中，您可以将它们导入到您需要的任何组件中。您可以从任何组件调用 this.addFriend(friend)，然后从 this.friends 访问的 getter 将在发生突变时自动更新新 friend 。您始终可以在应用的任何 View 中使用相同的数据，并且知道它与您的数据库是最新的。

一些杂项:

• 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 一起用于“时间旅行”。您可以看到已发生的每个突变的列表并倒带/重做它们。它非常适合调试和查看数据更改的位置。