Soy un nuevo estudiante de .net+vuejs y estoy usando
esta plantilla de proyecto para vuejs
Estoy tratando de usar vuex en mi proyecto para mostrar datos de países de la base de datos pero no funciona
principal.js
import 'bootstrap/dist/css/bootstrap.css' import { createApp } from 'vue' import App from './App.vue' import router from './router' createApp(App).use(router).mount('#app')índice.js
import { createApp } from "vue"; import App from "./App.vue"; import Vuex from "vuex"; import countries from "./module/countries/countries"; createApp(App).use(Vuex); export default new Vuex.Store({ modules: { countries: countries } });almacenar archivo
import axios from "axios"; const state = { countries:[] }; const countries = { async getCountries({ commit }, payload) { const result = await axios.get("Pho/GetCountries"); return result.data; } }; export default { namespaced: true, state, mutations, countries, getters }mi componente
<script> import axios from 'axios' import swal from 'sweetalert'; export default { name: "Home", data() { return { countries: [], } }, methods: { getCountries: async function () { this.countries = await this.$store.dispatch("countries/getCountries"); } }, mounted() { this.getCountries(); } } </script>ERROR: no capturado (en promesa) TypeError: no se pueden leer las propiedades de undefined (leyendo 'despacho') intenté importar la tienda a mi main.js así
import 'bootstrap/dist/css/bootstrap.css' import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './index.js' createApp(App).use(router, store).mount('#app')pero la aplicación nunca se inicia
No es una buena práctica llamar a las API desde archivos de almacenamiento. Use el almacenamiento vuex solo para almacenamiento, use mixins (recomendado) o métodos de componentes para enviar API. ¡Mostraré un enfoque simple para administrar el almacenamiento vuex! Archivo de almacenamiento: index.js
import Vue from 'vue' Vuex from 'vuex' import router from '../router/index' Vue.use(Vuex) export const store = new Vuex.Store({ state: { countries:[] }, getters: {}, mutations: { countriesChanger(state, payload) { state.countries = payload; }, }, actions: {}, }); Archivo de componente: MyComponent.vue
<template> <li v-for="country in countries"> {{country}} </li> </template> <script> export default { name: "Home", data() { return { countries: [], } }, mounted() { this.getCountries(); // assume this function calls to your API }, watch: { "$store.state.countries": function () { // Listens when countries in storage updated this.countries = this.$store.state.countries; } } </script>Para cambiar el elemento de almacenamiento de vuex (para actualizar los países), use mutaciones después de obtener datos de su API:
this.$store.commit("countriesChanger", countriesFromAPI);¡Eso es todo!