Структурирование проекта Vue + Vuex

Я немного запутался здесь, где разместить свои глобальные функции. Во многих примерах файл main.js указывает на компонент приложения, и он помещается где-то внутри html. Этот рабочий процесс был бы прекрасен для меня, если бы я просто содержал всю свою логику в этом компоненте приложения. Но я сочетаю компоненты с функциональностью Laravel, поэтому это не работает для меня.

В настоящее время мой файл main.js содержит кучу методов, которые мне нужны для доступа из любого места в моем приложении. Эти методы не содержат каких-либо событий трансляции, поэтому их можно эффективно размещать в любом месте, пока они получают экземпляр vue-resource.

Мой файл main.js:

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

Надеюсь, кто-нибудь может сказать мне, где я могу разместить свои методы дружбы, если я буду использовать vuex или вообще, потому что это не похоже на лучшую практику вообще.

Спасибо.

ОТВЕТЫ

Ответ 1

Vuex управляет всеми данными в вашем приложении. Это "единственный источник истины" для данных на вашем интерфейсе. Поэтому все, что изменяет состояние вашего приложения, например, добавление друга или отказ от друга, должно проходить через Vuex. Это происходит с помощью трех основных типов функций, геттеров, действий и мутаций.

Отъезд: https://github.com/vuejs/vuex/tree/master/examples/shopping-cart/vuex

Getters используются для извлечения данных из хранилища в Vuex. Они реагируют на изменения, то есть при изменении данных Vuex информация в вашем компоненте также обновляется. Вы можете поместить их в нечто вроде getters.js, чтобы вы могли импортировать их в любой модуль, в котором они вам нужны.

Действия - это функции, которые вы вызываете напрямую, т.е. acceptFriendRequest, когда пользователь нажимает кнопку. Они взаимодействуют с вашей базой данных, а затем отправляют мутации. В этом приложении все действия находятся в actions.js.

Таким образом, вы вызываете this.acceptFriendRequest(recipient) в свой компонент. Это сообщит вашей базе данных о обновлении статуса друга, после чего вы получите подтверждение, что это произошло. Это когда вы отправляете мутацию, которая обновляет список друзей текущих пользователей в Vuex.

Мутация обновляет данные в Vuex, чтобы отразить новое состояние. Когда это происходит, все данные, которые вы получаете в геттере, также обновляются. Вот пример всего потока:

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 будет автоматически обновляться новым другом, когда произойдет мутация. Вы всегда можете использовать одни и те же данные в любом представлении в своем приложении и знать, что он работает с вашей базой данных.

Некоторые вещи:

  • 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 для "путешествия во времени". Вы можете увидеть список всех мутаций, которые произошли и перемотать их/переделать. Это отлично подходит для отладки и просмотра, где данные изменяются.