Vuex

Una solución para compartir/intercambiar/modificar/añadir... datos, métodos y acciones entre archivos es Vuex.

Vuex permite centralizar los datos, métodos y acciones.

Funciona igual que la parte del script que habíamos visto hasta ahora con pequeñas diferencias. data === store, methods === actions y computed === getters

Para este intercambios de datos tenemos que establecer un protocolo para su reactividad.

Una vez actualizados los datos tienen que recibirse en los archivos vinculados.

Esto lo conseguimos con las mutaciones que se encargan de actualizar los datos una vez que son enviados a través de las acciones.

Como comunicarse con Vuex

this.$store.state.nombreObjeto

this.$store.dispatch.('nombreFuncion', 'payload')

Acciones y Mutaciones VUEX

async obtenerDatos () { 
  const data = await getDocs(collection(db, "productos"));
    data.forEach((doc) => {
    let producto = doc.data()
    producto.id = doc.id
    this.productos.push(producto)
    console.log(producto)
  });
},

vs

state: {
  usuario: null,
  obras: [],
  obra: {
    id: "",
    title: "",
    author: "",
    date: "",
    synopsis: "",
    link: "",
    photo: "",
    categoria: "",
    editorial: "",
    pelicula: "",
    comic: "",
  },
},

mutations:

SET_OBRAS(state, payload) {
  state.obras = payload;
},

actions:

async obtenerDatos({ commit }) {
  const obras = [];
  const data = await getDocs(collection(db, "obras"));
  data.forEach((doc) => {
    let obra = doc.data();
    obra.id = doc.id;
    obras.push(obra);
    console.log(obra);
  });
  commit("SET_OBRAS", obras);
},

Methods y computed VIEWS

import { mapActions, mapState } from 'vuex'

methods

methods: {
  ...mapActions(['obtenerDatos'])
},

computed: {
...mapState(['obras', 'obra'])
},

created(){
    this.obtenerDatos()
},

Alternativa

methods: {
  enviar (){
    this.$store.dispatch('obtenerDatos')
  },
  recibir(){
    this.$store.state.obras
  }
},

created(){
  this.enviar()
  this.recibir()
},