Javascript 构建Vue+；Vuex项目

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

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

我的main.js文件：

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

---

谢谢。

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

退房：

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将在发生变异时自动与新朋友一起更新。您可以在应用程序的任何视图中始终使用相同的数据，并知道该数据在您的数据库中是最新的

一些杂项材料：


getter会自动将
state
作为变量接收，因此您可以始终引用Vuex存储的状态
突变永远不应该是异步的。在操作中执行抓取/更新，然后仅为更新数据而分派变异
使用
Vue资源创建服务（或资源）
将使获取/更新/删除资源更加容易。您可以将它们放在单独的文件中，并将它们导入
actions.js
以保持数据库检索逻辑的分离。然后您将编写类似于
FriendService.get（{id:1}）
的内容，而不是
Vue.http.get（'/users/1'）
。看
Vuex与vue devtools配合使用，实现“时间旅行”。你可以看到每一个已经发生的突变的列表，然后倒带它们/重做它们。这对于调试和查看数据更改的位置非常有用
感谢您的详细解释和帮助，这对我意义重大。只是个问题；在这种情况下，我的友谊API调用方法实际上不必更新vuex存储。这些调用只是向api端点发出独立请求。但我的应用程序的其他部分将使用vuex。当这些方法实际上不需要更新应用商店时，是否仍建议按照您的建议执行此操作？如果应用程序中有任何其他视图希望了解朋友列表，则使用Vuex将是一个不错的选择。这样你就不必在不同的地方重新获取你的朋友列表，而且你总是知道你已经与数据库同步了。但如果它超出了您的需要，那么涉及Vuex只是额外的工作。在这种情况下，我只需要创建一个类似于
/services/Friends.js
的东西，它具有管理友谊的所有功能，因此您可以在任何需要的地方导入它。如果将它（vuex和本地组件数据）分开，您应该将数据库逻辑存储在哪里以从API获取数据？我想不是在Vuex目录中吧？在名为api的单独目录中？对于不使用Vuex的组件的脚本，我应该只使用/services/目录吗？还是应该将所有组件的此目录用作全局操作目录？如果需要，请从该脚本更新Vuex？请在链接的main.js中添加至少一些带有通用抽象函数名的要点（因为链接已断开）。另外，我不清楚您是指Vue.js的全局函数/助手，还是指商店（vuex）的全局函数/助手，还是两者都指（根据您上一段，这只是vuex）。请澄清。（考虑删除冗余标记）