javascript - tutorial - vue sync

Estructurar un proyecto de Vue+Vuex

Question

Estoy un poco confundido aquí sobre dónde ubicar mis funciones globales. En muchos ejemplos, un archivo main.js apunta a un componente de la aplicación y se ubica en algún lugar dentro del html. Este flujo de trabajo estaría bien para mí si tuviera que simplemente contener toda mi lógica dentro de este componente de la aplicación. Pero estoy combinando componentes con la funcionalidad de Laravel, así que esto no funciona para mí.

Actualmente, mi archivo main.js contiene una serie de métodos a los que necesito acceso desde cualquier parte de mi aplicación. Estos métodos no contienen ningún evento de transmisión, por lo que pueden colocarse en cualquier lugar siempre que obtengan una instancia de recurso vue.

Mi archivo main.js:

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

Espero que alguien pueda decirme dónde podría colocar mis métodos de amistad si tuviera que usar vuex o en general ya que esto no parece ser una buena práctica.

Gracias.

Answer 1

Vuex maneja todos los datos en su aplicación. Es una "fuente única de verdad" para los datos en su front-end. Por lo tanto, cualquier cosa que cambie el estado de su aplicación, como agregar un amigo o negar a un amigo, debe fluir a través de Vuex. Esto sucede a través de tres tipos principales de funciones, captadores, acciones y mutaciones.

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

Los getters se utilizan para obtener datos del almacenamiento en Vuex. Son reactivos a los cambios, lo que significa que si los datos de Vuex cambian, la información en su componente también se actualiza. Puede ponerlos en algo como getters.js para que pueda importarlos en cualquier módulo en el que los necesite.

Las acciones son funciones que llamas directamente, es decir. acceptFriendRequest cuando un usuario hace clic en el botón. Interactúan con su base de datos y luego envían mutaciones. En esta aplicación, todas las acciones están en actions.js .

Entonces llamarías a this.acceptFriendRequest(recipient) en tu componente. Esto le indicaría a su base de datos que actualice el estado de amigo, luego obtendrá una confirmación de que esto sucedió. Ahí es cuando envías una mutación que actualiza la lista de amigos de los usuarios actuales dentro de Vuex.

Una mutación actualiza los datos en Vuex para reflejar el nuevo estado. Cuando esto sucede, todos los datos que está recuperando en un getter también se actualizan. Aquí hay un ejemplo de todo el flujo:

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;
  }
}

Entonces, todos estos están organizados en sus propios archivos, y puede importarlos en cualquier componente que necesite. Puede llamar a this.addFriend(friend) desde cualquier componente, y luego su getter al que se accede desde this.friends se actualizará automáticamente con el nuevo amigo cuando ocurra la mutación. Siempre puede usar los mismos datos en cualquier vista en su aplicación y saber que es actual con su base de datos.

Algunas cosas diferentes:

• getters automáticamente recibe el state como una variable, por lo que siempre puede hacer referencia al estado de su tienda Vuex
• las mutaciones nunca deben ser asincrónicas. Realice búsquedas / actualizaciones en acciones y luego envíe mutaciones solo para actualizar sus datos
• crear servicios (o recursos) utilizando Vue Resource hará que los Vue Resource búsqueda / actualización / eliminación sean aún más fáciles. puede ponerlos en archivos separados e importarlos en sus actions.js para mantener la lógica de recuperación de la base de datos separada. Entonces estarías escribiendo algo como FriendService.get({id: 1}) lugar de Vue.http.get(''/users/1'') . ver https://github.com/vuejs/vue-resource/blob/master/docs/resource.md
• Vuex funciona con vue devtools para "viajar en el tiempo". Puede ver una lista de todas las mutaciones que se han producido y rebobinarlas / rehacerlas. Es genial para depurar y ver dónde se cambian los datos.