vue.js - Nuxtjs 如何管理两个不同数据源的状态

Question

我是 Nuxtjs 的新手，在 Nuxtjs 中使用 Vuex，如何从两个不同的数据源获取数据？

我有一个课程表和课程类别表。

我已经可以检索和显示的课程，直到现在我才可以检索和显示的课程类别。

我的结构是：

在商店目录我有这些文件：

• index.js
• 课程.js
• courseCategories （只更改 api 调用和名称）

---

在pages目录我有这些文件：

• 索引.vue
• 课程.vue

在 pages/index.vue：

async fetch({store}){
    await store.dispatch('courses/fetchAllCourses')
    await store.dispatch('coursesCategories/fetchAllCoursesCategories')
  } 

在 pages/courses.vue 我有计算的属性：

courses(){
    return this.$store.state.courses.all
},
coursesCategories(){
    return this.$store.state.coursesCategories.all
},

在stores/courses.js 我有这个代码：

export const state = () => ({
    all : []    
})

export const actions = {
   async fetchAllCourses({commit}) {
        let courses = await this.$axios.$get('/courses/')
        commit('setCourses', courses)
   }
}

export const mutations  = {
    setCourses(state, courses) {
        state.all = courses
    }
}

对于类别，我只需将 api 调用更改为courseCategories并重命名变量

如何获取课程类别数据？我做错了什么？

标签： vue.jsnuxt.js