Vuex is not able to find namespace of module

Question

I have a Vue2 sample app and want to add a Vuex store with a todos module. Inside the store folder I changed the index.js file to

import Vue from "vue";
import Vuex from "vuex";

import * as todos from "./modules/todos/index.js";

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    todos
  },
});

Inside

/store/modules/todos

I created the following files

index.js

import * as state from "./state.js";
import * as getters from "./getters.js";

export const module = {
  namespaced: true,
  state,
  getters,
};

state.js

export const state = {
    todos: []
}

getters.js

export const getters = {
  todos(state) {
    return state.todos;
  }
};

Inside my component I want to access the getter:

<script>
import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters("todos", ["todos"]), // namespace.getter
  },
};
</script>

Unfortunately I get this error when loading the component

[vuex] module namespace not found in mapGetters(): todos/

Does someone know what's wrong or missing here? Thanks for help

Answer 1

I think your import/export statements are the culprit.

Try this:

/store.js

import Vue from "vue";
import Vuex from "vuex";

import todos from "./modules/todos";

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    todos
  },
});

/store/modules/todos/index.js

import state from "./state";
import getters from "./getters";

const todos = {
  namespaced: true,
  state,
  getters,
};

export default todos;

The other files seem fine.

Answer 2

Work for me

Base API URL project/src/api/common.js

import axios from 'axios'

export const HTTP = axios.create({
    baseURL: 'http://api-url',
})

Base element project/src/api/element.js

import {HTTP} from './common'

function createHTTP(url) {
    return {
        async post(config) {
            return HTTP.post(`${url}`, config).then(response => {
                console.log(response)
                return response.data
            })
        },
        async get(element) {
            return HTTP.get(`${url}${element.id}/`)
        },
        async patch(element) {
            console.log(element)
            return HTTP.patch(`${url}${element.id}/`, element).then(response => {
                console.log(response)
                return response.data
            })
        },
        async delete(id) {
            HTTP.delete(`${url}${id}/`)
            return id
        },
        async list(queryParams = '') {
            return HTTP.get(`${url}${queryParams}`).then(response => {
                return response.data.results
            })
        }
    }
}

export const Todos = createHTTP(`/todos/`)

Your store project/src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import todos from "@/store/modulse/todos";

Vue.use(Vuex)

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

Your mutations types project/src/store/mutation-types.js

export const SET_TODOS ='SET_TODOS'
export const PATCH_TODO ='PATCH_TODO'
export const DELETE_TODO ='DELETE_TODO'
export const CREATE_TODO ='CREATE_TODO'

Your module project/src/store/modulse/todos.js

import {
    Todos,
} from '@/api/elements'
import {
    SET_TODOS, PATCH_TODO, DELETE_TODO, CREATE_TODO
} from '../mutation-types'


// Getters
export default {
    state: {
        todos: []
    },
    getters: {
        getTodos(state) {
            return state.todos
        },
    },
// Mutations
    mutations: {
        [SET_TODOS](state, todos) {
            state.todos = todos
        },
        [PATCH_TODO](state, todos) {
            let id = todos.id
            state.todos.filter(todos => {
                return todos.id === id
            })[0] = todos
        },
        [CREATE_TODO](state, todo) {
            state.todos = [todo, ...state.todos]
        },
        [DELETE_TODO](state, {id}) {
            state.todos = state.todos.filter(todo =>{
                return todo.id !==id
            })
        },

    },
// Actions
    actions: {
        async setTodos({commit}, queryParams) {
            await Todos.list(queryParams)
                .then(todos => {
                    commit(SET_TODOS, todos)
                }).catch((error) => {
                    console.log(error)
                })
        },
        async patchTodo({commit}, todoData) {
            await Todos.patch(todoData)
                .then(todo => {
                    commit(PATCH_TODO, todo)
                }).catch((error) => {
                    console.log(error)
                })
        },
        async deleteTodo({commit}, todo_id) {
            await Todos.delete(todo_id)
                .then(resp => {
                    commit(DELETE_TODO, todo_id)
                }).catch((error) => {
                    console.log(error)
                })
       },
       async createTodo({commit}, todoData) {
            await Todos.create(todoData)
                .then(todo => {
                    commit(CREATE_TODO, todo)
                }).catch((error) => {
                    console.log(error)
                })
       },
}

In your project/src/main.js

import Vue from 'vue'
import store from './store'
import App from './App.vue'
import Axios from 'axios'

Vue.prototype.$http = Axios;

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

In your project/src/App.vue

import {mapActions, mapGetters} from "vuex";

export default {
  name: 'App',
  components: {},
  data() {
    return {}
  },
  methods: {
    ...mapActions(['setTodos','patchTodo','createTodo','deleteTodo']),
  },
  computed: {
    ...mapGetters(['getTodos']),
  },
  async mounted() {
     await this.setTodos()
  },
}