构建Vue + Vuex项目

Structuring a Vue + Vuex project

本文关键字：项目 Vuex Vue 构建      更新时间：2023-09-26

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

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

main.js文件:

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

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

谢谢。

Vuex管理应用程序中的所有数据。它是前端数据的"单一真实来源"。因此，任何改变应用程序状态的操作，比如添加好友或拒绝好友，都需要通过Vuex。这通过三种主要的函数类型实现:getter、action和mutations。

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

getter用于从Vuex的存储中获取数据。它们对更改做出反应，这意味着如果Vuex数据更改，组件中的信息也会更新。你可以把它们放在像getters.js这样的东西中，这样你就可以在任何你需要它们的模块中导入它们。

action是可以直接调用的函数。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将在发生突变时自动更新为新的好友。你可以在应用程序的任何视图中使用相同的数据，并知道它是当前的数据库。

一些杂项:

  • 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一起用于"时间旅行"。您可以看到发生的每个突变的列表，并倒带/重做它们。这对于调试和查看数据被更改的位置非常有用。
相关文章：