CODEWITHSUNDEEP
javascriptvue.jsvuexvuex-modules
courage
courage

Reputation: 125

How to break Vuex into modules

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

enter image description here

Here is the app structure

enter image description here

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';

Upvotes: 0

Views: 66

Answers (1)

Murali krishna Gundoji
Murali krishna Gundoji

Reputation: 11

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

Upvotes: 0

Related Questions