vuejs2 - nuxtjs 中的 vuex 模块模式

Question

我试图在 nuxtjs 的 vuex 存储中使用模块模式实现一个待办事项列表，但收到错误 this.$store.todo 未定义，无法找到与 nuxt 相关的太多信息

有人可以帮忙吗

存储index.js

export const state = () => ({

})

export const mutations = {

}

存储 todo.js

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

export const mutations = {
  mutations ...
}

export const actions = {
  actions ...
} 

export const getters = {
  getters ...
}

index.vue页面

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

根据我读到的内容，我认为这应该有效，但事实并非如此

如果我不使用模块模式并且只有一个 index.js 设置，我应该添加它一切正常

非常感谢

Answer 1

您需要以不同的方式调用它

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

最好也用 fetch 来调用它方法，未创建