web-dev-qa-db-fra.com

Vue / Vuex type d'action inconnu

J'ai commencé à implémenter Vuex dans mon application et j'ai décidé de scinder mon magasin en modules.

Au début, j'ai créé un seul module pour tester le fonctionnement des modules Vuex, car je n'en avais aucune expérience.

J'ai créé un dossier de modules et à l'intérieur, j'ai un dossier pour mon module appelé Company . Dans le dossier de la société, j'ai créé les fichiers suivants: action.js, getters.js, index.js, mutations.js .

Le code à l'intérieur de ces fichiers:

action.js :

import api from '@/vuex/utils/api'

const getCompanies = (context) => {
    api.get('/57/companies').then(response => {
        context.commit('GET_COMPANIES', response)
    }).catch((error) => {
        console.log(error)
    })
}

export default {
    getCompanies
}

NOTE: À l'intérieur de api que j'importe, je viens de créer des méthodes pour les opérations de base (get, post, delete, etc ...)

getters.js: 

const allCompanies = state => state.companies

export default {
    allCompanies
}

mutations.js: 

const GET_COMPANIES = (state, companies) => {
    state.companies = companies
}

export default {
  GET_COMPANIES
}

index.js: 

import actions from './action'
import getters from './getters'
import mutations from './mutations'

const state = {
  companies: []
}

export default {
  namespaced: true,
  state,
  actions,
  getters,
  mutations
}

Après la création de ce module, je l'ai ajouté à mon magasin comme ceci:

store.js: 

import Vue from 'vue'
import Vuex from 'vuex'
import companyModule from './modules/company'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    company: companyModule
  }
})

export default store

NOTE J'ai dit à mon vue application d'utiliser ce magasin dans le fichier main.js

Pour tester cela, j'ai créé un composant simple HelloWorld dans lequel j'ai tenté de charger les données dans une table HTML simple. Ici le problème est apparu. À l'intérieur du crochet monté , j'ai envoyé mon action appelée getCompanies et je peux voir les données à l'intérieur de ma table, c'est là, mais je reçois une erreur à l'intérieur de ma console de développement en me disant:

vuex.esm.js? 358c: 417 [vuex] type d'action inconnu: getCompanies

Code pour le composant HelloWorld:

import { mapGetters } from 'vuex'

...

computed: {
    ...mapGetters({
        companies: 'company/allCompanies'
     })
}

...

mounted () {
    this.$store.dispatch('company/getCompanies')
}

...

Les données sont présentes dans mon magasin, vérifiez la capture d'écran de mon vue devtools: vuedevtools

Ma question est donc la suivante: pourquoi cette erreur se produit-elle dans ma console? Quelque chose me manque-t-elle et comment fonctionne-t-elle avec cette erreur? Merci!

javascriptvue.jsvuex
7
Aleksandar Milicevic

Essaye ça:

import { mapGetters,  mapActions} from 'vuex'

computed: {
    ...mapGetters({
        companies: 'company/allCompanies'
     })
}

methods: {
  ...mapActions(['company/getCompanies'])
},

mounted() {
  this['company/getCompanies']();
},

Mais j'aime bien faire le namespacing comme ci-dessous, mais il y a un problème, référez-vous au problème ici .

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

mounted() {
  this.getCompanies();
},
5
Syed

Lorsque vous utilisez des modules dans votre store.js, veillez à ce que vous les utilisiez.

export const namespaced = true

et PAS 

export const namespaces = true

dans vos fichiers modules/foo.js. Une faute de frappe moche!

2
Marcel Zebrowski

Vous pouvez le réparer avec

this.$store.dispatch('company/getCompanies', null, {root:true})

Utilisez également la méthode mapActions dans les composants

1
AliDenizAltun