构建Vue Vuex项目-Java 学习之路

我对这里放置全局函数感到困惑 . 在很多示例中，main.js文件指向应用程序组件，并将其放在html中的某个位置 . 这个工作流程对我来说很好 . 如果我只是简单地包含我在这个app组件中的所有逻辑 . 但我将组件与Laravel功能相结合，所以这对我不起作用 .

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

我的main.js文件：

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

希望有人可以告诉我，如果我使用vuex或者一般情况下我可以放置友谊方法，因为这似乎不是最佳实践 .

谢谢 .

1 回答

23
Vuex管理应用程序中的所有数据 . 它是前端数据的“单一事实来源” . 因此，任何改变应用程序状态的内容（例如添加好友或拒绝朋友）都需要流经Vuex . 这通过三个主要函数类型，getter，actions和mutation发生 .

退房：https://github.com/vuejs/vuex/tree/master/examples/shopping-cart/vuex

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

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

所以你要在你的组件中调用 this.acceptFriendRequest(recipient) . 这会告诉您的数据库更新朋友状态，然后您会收到确认，确认这发生了 . 那个's when you dispatch a mutation that updates the current users'在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将在发生突变时自动与新朋友一起更新 . 您始终可以在应用程序的任何视图中使用相同的数据，并且知道它对您的数据库是最新的 .

一些misc的东西：
- 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一起使用"time-traveling" . 您可以看到已发生的每个突变的列表，并回放它们/重做它们 . 它非常适合调试和查看数据的更改位置 .
回复于 2024-05-13T14:38:08+08:00

构建Vue Vuex项目

1 回答

相关问题