Vue/Vuex 未知动作类型答案

【问题标题】：Vue/Vuex unknown action typeVue/Vuex 未知动作类型
【发布时间】：2018-11-05 22:58:53
【问题描述】：

我已经开始在我的应用程序中实现 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 文件中使用这个商店

为了测试这一点，我创建了简单的 HelloWorld 组件，我尝试在简单的 html 表中加载数据。这里问题出现了。在 mounted 钩子中，我已经发送了名为 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 的屏幕截图：

所以我的问题是为什么我在控制台中收到此错误，我是否遗漏了什么，以及它是如何处理该错误的。谢谢！

【问题讨论】：

根据截图，store数据已经加载成功，可以正常使用了。您确定 this.$store.dispatch('getCompanies') 没有在其他任何地方调用吗？
大声笑，其实你是对的我开始质疑自己，我一直在寻找完全错误的错误，谢谢
这就是mapActions 和其他助手很棒的原因之一。有助于非常有效地定位商店使用情况。
是的，我肯定会更深入地检查一下，第一次使用 Vuex 所以我不确定我是否正确地做事
module namespace ` // this.$store.dispatch('doubleHundred'); // ????模块命名空间 this.$store.dispatch('seatSelect/doubleHundred'); `

标签： javascript vue.js vuex

【解决方案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();
},

【讨论】：

找了两天的解决办法，终于找到你的帖子了！谢谢你。
注释：ES-next、...spread、distructuring assingment 重命名

【解决方案2】：

你可以用

修复它

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

同样在组件中使用mapActions方法

【讨论】：

{ root: true } 选项在商店里工作得很好，这对我来说是修复。我需要从动作处理程序将动作分派到另一个商店。

【解决方案3】：

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

export const namespaced = true

和不

export const namespaces = true

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

【讨论】：

【解决方案4】：

请删除 namespaced: true 并重试。

【讨论】：