Estoy tratando de configurar Vuex en mi aplicación Vue.
aplicación.js
require('./bootstrap'); window.Vue = require('vue').default; import Vuex from "vuex"; Vue.use(Vuex); import storeData from "./store"; const store = new Vuex.Store( storeData ) Vue.component('home', require('./components/Home.vue').default); const app = new Vue({ el: '#app', store });tienda.js
import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); export const state = { members: [], }; export const getters = { members: state => () => { return state.members; } }; export const actions = { async getMembers({ commit, state, dispatch }){ const res = await this.$axios.get('getMembers'); const { data } = await res; commit('setMembers', data); } }; export const mutations = { setMembers(state, members){ state.members = members; }, }; export default new Vuex.Store({ state, getters, actions, mutations });Inicio.vue
<template> <div class="container"> <div class="row justify-content-center"> <div class="col-md-8"> <div class="card"> <div class="card-header">Home</div> <div class="card-body"> {{ members }} </div> </div> </div> </div> </div> </template> <script> import { mapGetters, mapActions, mapMutations } from "vuex"; export default { mounted() { this.getMembers(); }, computed: { ...mapGetters({ members: 'members' }) }, methods: { ...mapActions({ getMembers: 'getMembers' }) } } </script>La página de inicio muestra el captador de "miembros" con problemas. Lo veo en las herramientas de desarrollo como una matriz vacía y si lo configuro en cualquier otra cosa, lo mostrará. Sin embargo, no detecta las acciones o mutaciones si trato de hacer una mutación. La acción, por ejemplo, dice: "[vuex] tipo de acción desconocido: getMembers" ¿Alguna idea de qué puede estar causando esto?
La tienda se inicializa dos veces con el new Vuex.Store , el constructor recibe una instancia de la tienda la segunda vez, lo que genera un error.
Es la tienda la que se exporta desde store.js, no los datos de la tienda .
Puede ser:
const store = new Vuex.Store({ state, getters, actions, mutations }); export default store;Entonces está claro que es la instancia de la tienda la que se exporta desde store.js.
Vue.use(Vuex) también se llama dos veces, esto probablemente no cause problemas excepto una advertencia porque los complementos de Vue generalmente contienen una protección contra la inicialización múltiple. store.js no necesita contenerlo, es común inicializar complementos en el punto de entrada de la aplicación.
Este es un error potencial:
require('./bootstrap'); window.Vue = require('vue').default; import Vuex from "vuex"; ...Las importaciones se elevan de acuerdo con las especificaciones, este comportamiento depende de la configuración, pero no se debe esperar que este código se evalúe en este orden.
Necesita ser:
import './bootstrap'; import Vue from "vue"; import Vuex from "vuex"; import store from "./store"; window.Vue = Vue; ...