I am working on pulling in two separate data sets within the store directory. I plan to create a categories list and an events list.
Initially, I began 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 setup is functioning as expected.
I transferred it to a category.js file and modified index.js to look like:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import category from './category'
export default new Vuex.Store({
modules: {
category
}
})
While I anticipate receiving the same list of categories as before, I encountered an error stating 'Cannot read properties of undefined (reading 'getters')'. This approach was suggested on an older Laracasts Forum.
After revisiting the Nuxt documentation, it appears that the structure should be more along the lines of:
import category from './category'
export const state = () => ({
category: []
})
Upon implementing these changes, the error disappeared but I still did not receive any data. However, this format does not seem quite right either.
I have been exploring similar solutions and going around in circles without finding a suitable solution yet. Any suggestions or ideas?