Historial de página

...

Aquí podemos ver el ciclo de cómo se ejecuta:

Cómo definir nuestro

...

Vuex store

En nuestro proyecto, definiremos Vuex enen src/store/index.js:

import Vue from 'vue'
import Vuex from 'vuex'
 
import moduloTexto from './modules/moduloTexto'
import moduloCuenta from './modules/moduloCuenta'
import createPersistedState from 'vuex-persistedstate'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    // Dividimos el estado en diferentes módulos que hagan referencia a diferentes ámbitos
    // Podríamos tener un módulo dedicado, por ejemplo, al login
    moduloTexto, moduloCuenta
  },
  // Para hacer que el estado persista tras refrescar la página
  plugins: [createPersistedState()]
})

...

Para el estado y los getters disponemos respectivamente demapStateymapGettersde mapState y mapGetters. Estos nos permiten mapearlos a propiedades computed:

import { mapGetters } from "vuex";
import { mapState } from "vuex";
 
export default {
    computed: {
        ...mapState("modulo", ["variableState", "otroState"]),
        ...mapGetters("modulo", ["isTal", "isCual"])
    }    
}

...

import { mapGetters } from "vuex";
import { mapState } from "vuex";
 
export default {
    computed: {
        ...mapState(["variableState", "otroState"]),
        ...mapGetters(["isTal", "isCual"])
    }    
}

Hay otra forma de referenciar al store y poder acceder tanto al estado como a los getters (también a las acciones como vemos en el siguiente apartado), y sería accediendo a this.$store:

this.$store.state["modulo/variable"]
this.$store.getters["modulo/getter"]

Actions

Para ejecutar acciones desde nuestros componentes, no tendremos que importar nada, simplemente usardispatchusar dispatch de esta manera:

this.$store.dispatch("modulo/action", parametro);

Si la acción no corresponde a ningún módulo, sólo tenemos que llamarla con el nombre de la propia acción. Las acciones son funciones que pueden tener parámetros, y como vemos éstos se le pasan después del nombre de la acción, separados por comas.

Acceder desde archivos JavaScript

El store ya lo tenemos integrado en los componentes, y ya hemos visto la forma de usarlo. Desde un archivo .js lo utilizaríamos igual, pero en vez de referenciarlo con this.$store, tendríamos que importarlo y acceder directamente a store:

import store from "../store"

store.getters["token/isLogged"];
store.dispatch("modulo/action", parametro);