Javascript Vue/Vuex 未知动作类型
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/53163508/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue/Vuex unknown action type
提问by Aleksandar Milicevic
I have started implementing Vuex in my application and I decided to split my store into modules.
我已经开始在我的应用程序中实现 Vuex，我决定将我的商店拆分成模块。
For the beginning I created only one module to test how Vuex modules works because I didn't have any previous experience with it.
一开始我只创建了一个模块来测试 Vuex 模块的工作原理，因为我之前没有任何使用它的经验。
I created a modules folder and inside I have one folder for my module called Company. Inside the company folder I have created next files: action.js, getters.js, index.js, mutations.js.
我创建了一个 modules 文件夹，里面有一个名为Company 的模块文件夹。在公司文件夹中，我创建了下一个文件：action.js、getters.js、index.js、mutations.js。
The code inside these files:
这些文件中的代码：
action.js:
动作.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: Inside the apithat i import i just created methods for basics operations(get,post,delete,etc...)
注意：在我导入的api 中，我刚刚创建了基本操作的方法（获取、发布、删除等...）
getters.js:
getters.js：
const allCompanies = state => state.companies
export default {
allCompanies
}
mutations.js:
突变.js：
const GET_COMPANIES = (state, companies) => {
state.companies = companies
}
export default {
GET_COMPANIES
}
index.js:
索引.js：
import actions from './action'
import getters from './getters'
import mutations from './mutations'
const state = {
companies: []
}
export default {
namespaced: true,
state,
actions,
getters,
mutations
}
After creation of this module I have added it to my store like this:
创建此模块后，我已将其添加到我的商店，如下所示：
store.js:
商店.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 I have told my vue app to use this store inside main.jsfile
注意我已经告诉我的 vue 应用程序在main.js文件中使用这个商店
To test this I have created simple HelloWorld component where I attempted to load the data inside simple html table. Here the problem showed up. Inside the mountedhook i have dispatched my action called getCompaniesand I can see the data inside my table, its there, but i am getting error inside my dev console telling me:
为了测试这一点，我创建了简单的 HelloWorld 组件，我试图在其中加载简单的 html 表中的数据。这里问题出现了。在安装的钩子内，我已经调度了名为getCompanies 的操作，我可以看到我的表中的数据，它在那里，但是我的开发控制台中出现错误告诉我：
vuex.esm.js?358c:417 [vuex] unknown action type: getCompanies
vuex.esm.js?358c:417 [vuex] 未知动作类型：getCompanies
Code for HelloWorld component:
HelloWorld 组件的代码：
import { mapGetters } from 'vuex'
...
computed: {
...mapGetters({
companies: 'company/allCompanies'
})
}
...
mounted () {
this.$store.dispatch('company/getCompanies')
}
...
Data is present in my store, check screenshot from my vue devtools:
数据存在于我的商店中，请查看我的 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!
所以我的问题是为什么我会在控制台中收到此错误，我是否遗漏了什么，以及它如何处理该错误。谢谢！
回答by Syed
Try this:
尝试这个：
import { mapGetters, mapActions} from 'vuex'
computed: {
...mapGetters({
companies: 'company/allCompanies'
})
}
methods: {
...mapActions(['company/getCompanies', 'company/getEmployees'])
},
mounted() {
this['company/getCompanies']();
},
But, I like to do namespacing as done below, but it has an issue, refer the issue here.
但是，我喜欢像下面那样做命名空间，但它有一个问题，请在此处参考问题。
methods: {
...mapActions('company', ['getCompanies', 'getEmployees'])
},
mounted() {
this.getCompanies();
this.getEmployees();
},
回答by AliDenizAltun
You can fix it with
你可以用
this.$store.dispatch('company/getCompanies', null, {root:true})
Also use mapActionsmethod in the components
mapActions在组件中也使用方法
回答by Marcel Zebrowski
When you use modules inside your store.js then take care that you use
当您在 store.js 中使用模块时，请注意使用
export const namespaced = true
and NOT
而不是
export const namespaces = true
inside your modules/foo.js files. An ugly typo!
在你的 modules/foo.js 文件中。一个丑陋的错别字！
