Vuex - Module state returns undefined

Question

am a little confused as to why the state property would return undefined. am new to vue.js and really need to understand how this works.

Here is what i've done

in the state.js file for let say todo module, i have

const state = () => {
    return {
        todos: [
            {
                id: 1,
                title: 'Go outside'
            },
            {
                id: 2,
                title: 'Come back in'
            }
        ]
    }
}
export default {
    state
}

i have an index file where i join everything together and export it

import state from './state'
import getters from './getters'
import actions from './actions'
import mutations from './mutations'

export default {
    state,
    getters,
    actions,
    mutations
}

and in the store entry point i have

import Todos from './modules/todos'
export default 
  modules: {
    Todos
  }
})

So, the problem is, actions works perfectly but the state is affecting other like getters and mutations since the state properties was undefined.

vue-devtool stop working in my browser so i tried to console.log(this.$store.state.todos) but yeah, it undefined

that returned an object but i would like to have access to the todos property not just in the computed but also in getters and mutations — courage
Could you try doing what @Mahamudul mentioned and make your export statement for state to be export default state — nishkaush
As for getters and mutations, you can assume you will be getting state as an argument since Vue will make it available for getters and mutations when you merge them together at the end as one module. please share your getters and mutations files for more info — nishkaush
i have done that, just can't figure out how to double-check all of them "getters" before using them in actual component — courage

Md Mahamudul Hasan Md Mahamudul Hasan · Accepted Answer · 2020-10-19T00:46:39

you have to modify the state.js file. you should export like below

export default {
    state: {
        todos: [
            {
                id: 1,
                title: 'Go outside'
            },
            {
                id: 2,
                title: 'Come back in'
            }
        ]
    }
}

Vuex - Module state returns undefined

1 Answers