My goal is to pull in two separate data sets under the store directory. Eventually I want to have a categories list and an events list.

I started with a single set in the index.js file.

export const state = () => ({
    categories: []
  })
  
  export const getters = {
    categories (state) {
      return state.categories
    }
  }
  
  export const mutations = {
    SET_CATEGORIES (state, categories) {
      state.categories = categories
    }
  }
  
  export const actions = {
    async nuxtServerInit({ commit, dispatch }) {
      let response = await this.$axios.$get('categories')
  
      commit('SET_CATEGORIES', response.data)
    }
  }

This works exactly as I expect it to.

I copied it over to a category.js file, and changed index.js to

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

import category from './category'

export default new Vuex.Store({
  modules: {
    category
  }
})
 

I expect to get the same list of the categories as before, but instead I get an error 'Cannot read properties of undefined (reading 'getters')'. This solution was suggested on an old Laracasts Forum.

I went back to the Nuxt docs, but they seem to suggest it should look more like

import category from './category'

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

When I make these changes, I lose the error, but still don't get any data back. But this doesn't quite look right either anyway.

I have started going in circles with similar solutions, and nothing is quite clicking yet. Any ideas?