Vue / Vuex неизвестный тип действия

Question

Я начал внедрять Vuex в свое приложение и решил разбить свой магазин на модули.

Для начала я создал только один модуль, чтобы проверить, как работают модули Vuex, потому что у меня не было никакого предыдущего опыта работы с ним.

Я создал папку модулей, и внутри у меня есть одна папка для моего модуля под названием Company . Внутри папки компании я создал следующие файлы: action.js, getters.js, index.js, mutations.js .

Код внутри этих файлов:

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
}

ПРИМЕЧАНИЕ. Внутри API , который я импортирую, я только что создал методы для базовых операций (получение, публикация, удаление и т. Д.)

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
}

После создания этого модуля я добавил его в свой магазин следующим образом:

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

ПРИМЕЧАНИЕ Я сказал моему приложению vue использовать этот магазин внутри main.js file

Чтобы проверить это, я создал простой компонент HelloWorld, где я попытался загрузить данные в простую HTML-таблицу. Здесь проблема обнаружилась. Внутри установленного крюка я отправил свое действие под названием getCompanies , и я могу видеть данные внутри моей таблицы, они там, но я получаю сообщение об ошибке в консоли разработчика, сообщая мне:

vuex.esm.js? 358c: 417 [vuex] неизвестный тип действия: getCompanies

Код для компонента HelloWorld:

import { mapGetters } from 'vuex'

...

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

...

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

...

Данные присутствуют в моем магазине, проверьте скриншот с моего vue devtools:

Итак, мой вопрос: почему я получаю эту ошибку в своей консоли, я что-то упускаю и как она работает с этой ошибкой? Спасибо!

Answer 1

Попробуйте это:

import { mapGetters,  mapActions} from 'vuex'

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

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

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

Но мне нравится делать пространство имен, как сделано ниже, но у него есть проблема, обратитесь к проблеме здесь .

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

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

Answer 2

Вы можете исправить это с помощью

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

Также используйте mapActions метод в компонентах