Vue/Vuex未知动作类型 [英] Vue/Vuex unknown action type
问题描述
我已经开始在应用程序中实现Vuex,我决定将商店拆分为模块.
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.
我创建了一个modules文件夹,内部有一个名为公司的模块文件夹.在公司文件夹中,我创建了下一个文件: action.js,getters.js,index.js,mutations.js .
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.
这些文件中的代码:
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等)
NOTE: Inside the api that i import i just created methods for basics operations(get,post,delete,etc...)
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
}
创建此模块后,我将其添加到我的商店中,如下所示:
After creation of this module I have added it to my store like this:
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表中.这里出现了问题.在 mount 挂钩中,我已调度名为 getCompanies 的操作,我可以在表中看到数据,该表在那里,但是在开发控制台中却出现错误,告诉我:
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 mounted hook i have dispatched my action called getCompanies and I can see the data inside my table, its there, but i am getting error inside my dev console telling me:
vuex.esm.js?358c:417 [vuex]未知操作类型:getCompanies
vuex.esm.js?358c:417 [vuex] unknown action type: getCompanies
HelloWorld组件的代码:
Code for HelloWorld component:
import { mapGetters } from 'vuex'
...
computed: {
...mapGetters({
companies: 'company/allCompanies'
})
}
...
mounted () {
this.$store.dispatch('company/getCompanies')
}
...
数据存储在我的商店中,请从vue devtools中检查屏幕截图:
Data is present in my store, check screenshot from my 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!
推荐答案
尝试一下:
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();
},
这篇关于Vue/Vuex未知动作类型的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!