javascript - Vue/Vuex 未知 Action 类型

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 中，我刚刚创建了用于基本操作(get、post、delete 等...)的方法

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 应用程序在 ma​​in.js 文件中使用这个商店

为了对此进行测试，我创建了简单的 HelloWorld 组件，我试图在其中将数据加载到简单的 html 表中。问题就出现在这里。在 mounted Hook 中，我已经发送了名为 getCompanies 的操作，我可以在我的表中看到数据，它在那里，但我的开发控制台中出现错误，告诉我:

vuex.esm.js?358c:417 [vuex] unknown action type: getCompanies

HelloWorld 组件代码:

import { mapGetters } from 'vuex'

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

...

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

...

数据存在于我的商店中，请查看我的 vue devtools 的屏幕截图:

So my question is why am I getting this error inside my console, am I missing something, and how is it working with that error. Thanks!

Answer 1

试试这个:

import { mapGetters,  mapActions} from 'vuex'

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

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

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

但是，我喜欢像下面那样做命名空间，但它有一个问题，请引用问题 here .

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

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