vuex module mode in nuxtjs

Question

I'm trying to implement a todo list using modules mode in the vuex store in nuxtjs but get the error this.$store.todo is undefined and cant find much about this relating to nuxt

Can anyone assist please I have

store index.js

export const state = () => ({

})

export const mutations = {

}

store todo.js

export const state = () => ({
    todos: [],
})

export const mutations = {
  mutations ...
}

export const actions = {
  actions ...
} 

export const getters = {
  getters ...
}

index.vue page

<template>
  <div>

    <h2>Todos:</h2>
    <p> Count: {{ doneTodosCount }} </p>

      <ul v-if="todos.length > 0">
        <li v-for="(todo, i) in todos" :key="i">
          ...
      </li>
    </ul>

    <p v-else>Done!</p>

    <div class="add-todo">
        <input type="text" v-model="newTodoText">
        <button @click="add">Add todo</button>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

export default {
  name: 'app',

  data () {
    return {
      newTodoText: ""
    }
  },

  created () {
      this.$store.todo.dispatch('loadData')
  },

  computed: {
      ...mapState(['todos', ]),
      ...mapGetters([ 'doneTodosCount', 'doneTodos'])
  },

  methods: {
    toggle (todo) {
      this.$store.todo.dispatch('toggleTodo', todo)
    },
  }
}
</script>

From what i read I thought this should work but doesn't

I should add it all works fine if i don't use modules mode and just have a single index.js setup

Many Thanks

Answer 1

You need to call it differently

this.$store.dispatch('todo/toggleTodo', todo)

Also better to call it in fetch method, not created