Quiero obtener algunos datos de un backend de firebase usando una acción para almacenarlos en estado vuex. Actualmente solo estoy trabajando con algunos datos ficticios. Leer los datos de la tienda en mi index.vue funciona, pero tan pronto como intento obtener la acción en index.vue, aparece el error de que es un tipo de acción desconocido.
tienda/artikels.js
export const state = () => ({ artikel: [ { id: "1", titel: "Hallo", untertitel: "Servas" }, { id: "2", titel: "Was", untertitel: "Wos" }, { id: "3", titel: "Geht", untertitel: "Wüst" } ] }) export const actions = () => ({ fetchArtikel() { console.log('fetch data from firebase') } }) export const getters = () => ({ artikel: (state) => { return state.artikel } })esto es index.vue
<script> import { mapActions } from 'vuex' export default { name: 'App', computed: { artikel() { return this.$store.state.artikels.artikel } }, async created() { await this.$store.dispatch('artikels/fetchArtikel') } </script>Ya intenté poner la tienda en store/index.js sin el espacio de nombres y también traté de enviarla a través de mapActions y asincrónico:
import mapActions from 'vuex' methods: { ...mapActions(['artikels/fetchArtikels']) }o:
async fetch({store}) { await store.dispatch('artikels/fetchArtikels') }Hasta ahora, sin suerte. ¿Alguien me puede ayudar? ¡Gracias por adelantado!
El problema es que las actions de su tienda y los getters son funciones, pero deben ser objetos:
// store/artikels.js export const actions = () => ({/*...*/}) // ❌ function export const getters = () => ({/*...*/}) // ❌ function export const actions = {/*...*/} // ✅ object export const getters = {/*...*/} // ✅ object