How to break Vuex into modules

Question

am attempting to separate states, getters, actions and mutations into separate files within a particular module. well, i have tried but just cant figure out where the error below is coming from or how to fix it.

ERROR

Here is the app structure

here is what i've done:

in actions.js

import axios from 'axios'

const actions  = {
    async getTodos(){
        let page_url = 'https://jsonplaceholder.typicode.com/todos';
        const res = await axios.get(page_url);
        console.log(res.data);
        this.commit('ALL_TODOS', res.data)
    }
}

export {
    actions
}

in getters.js

const allTodos = (state) => state.todos

export default {
    allTodos
}

in mutations.js

const ALL_TODOS = (state, payload) => state.todos = payload

export {
    ALL_TODOS
}

in state.js

const state = {
    todos: []
}

export {
    state
}

my intention was to to import all these file into one index.js file within the todo folder store/todo/index.js.

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

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

Vue.use(Vuex);

export const store1 = new Vuex.Store({
    state,
    actions,
    getters,
    mutations,
  });

after i have done this, i want all the store i have created to available in store/index.js file like so

import Todos from './modules/todo/index';

export default {
    Todos
}

This way, all i have to import in the js/main.js will be just store/index.js like i have done in the line below

import store from './store/index';

I have a feeling the the problem has something to do with incorrect exports. Try removing the brackets around actions in export { actions } and replace it with export default actions. Also do this with state in state.js, and try adding a default after export in mutations.js. If you can create a codesandbox demonstrating this problem, it'll be much easier to help you — marsnebulasoup
@marsnebulasoup exactly, i changed export to export default {} and it worked except that the promise returns undefined — courage
You mean in actions? You aren't returning anything so it'll return undefined... — marsnebulasoup
yeah, but console.log(res.data) was suppose to display the response i guess? — courage

Murali krishna Gundoji Murali krishna Gundoji · Accepted Answer · 2021-05-24T16:52:05

In vuex all actions take in parameter 'context' and call commit from it. Please check documentation at https://vuex.vuejs.org/guide/actions.html#dispatching-actions

How to break Vuex into modules

1 Answers