Vue / Vuex未知动作类型

Question

我已经开始在应用程序中实现Vuex，因此决定将商店拆分为模块。

一开始，我只创建了一个模块来测试Vuex模块的工作方式，因为我以前没有任何经验。

我创建了一个modules文件夹，里面有一个名为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
}

突变.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文件中使用此存储

为了测试这一点，我创建了一个简单的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

你可以用

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

mapActions在组件中也使用方法

Answer 2

当您在 store.js 中使用模块时，请注意使用

export const namespaced = true

而不是

export const namespaces = true

在你的 modules/foo.js 文件中。一个丑陋的错别字！

Answer 3

尝试这个：

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();
},