nuxtjs中的vuex模块模式

时间:2018-06-14 11:50:01

标签: vuejs2 vuex nuxt.js

我正在尝试使用nuxtjs中的vuex商店中的模块模式实现待办事项列表但是得到错误。$ 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 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>

根据我的阅读,我认为这应该有效,但不是

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

非常感谢

1 个答案:

答案 0 :(得分:2)

您需要以不同方式调用

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

最好在fetch方法中调用它,而不是创建