javascript - Vue/Vuex unknown action type
问题描述
I have started implementing Vuex in my application and I decided to split my store into modules.
For the beginning I created only one module to test how Vuex modules works because I didn't have any previous experience with it.
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.
The code inside these files:
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
}
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
NOTE I have told my vue app to use this store inside main.js file
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] unknown action type: getCompanies
Code for HelloWorld component:
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:
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']();
},
但是,我喜欢按照下面的方式进行命名空间,但它有一个问题,请参考这里的问题。
methods: {
...mapActions('company', ['getCompanies', 'getEmployees'])
},
mounted() {
this.getCompanies();
this.getEmployees();
},
推荐阅读
- python - 如何在 Pandas DataFrame 中跳过列标题行
- rstudio - 将 csv 文件加载到 Rstudio 中的 Spark DataFrame 时发生错误
- python-3.x - 在 for 循环 Python 中结束
- flutter - 在 Flutter webview 中拦截 AJAX 适用于 iOS 但不适用于 Android
- clojure - 如何在 deps.edn 项目中使用 cljsjs 包
- javascript - 是否可以通过免费帐户使用 firebase 进行网络抓取?
- sql-server - TSql 前面的反斜杠更改列值
- linux - 仅当行不存在时,如何将一行添加到不同子目录下的多个文本文件?
- arrays - 如何将数组值存储在 Postman 的环境变量中
- python - 使用 Bokeh 绘图时如何为多个数据集之一添加悬停工具