我已经开始在我的应用程序中实现 Vuex,我决定将我的商店拆分为模块。
一开始我只创建了一个模块来测试 Vuex 模块是如何工作的,因为我之前没有任何使用它的经验。
我创建了一个 modules 文件夹,在里面我有一个名为 Company 的模块文件夹。在公司文件夹中,我创建了下一个文件: action.js、getters.js、index.js、mutations.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
}
注意:在我导入的 api 中,我刚刚为基本操作创建了方法(获取、发布、删除等……)
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
}
创建此模块后,我已将其添加到我的商店,如下所示:
商店.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 的屏幕截图:
所以我的问题是为什么我在控制台中收到这个错误,我错过了什么,以及它是如何处理这个错误的。谢谢!
原文由 Aleksandar Milicevic 发布,翻译遵循 CC BY-SA 4.0 许可协议
尝试这个:
但是,我喜欢按照下面的方式进行命名空间,但它有一个问题,请参考 这里 的问题。