首页 文章

nuxtjs中的vuex模块模式

提问于
浏览
2

我正试图在nuxtjs的vuex商店中使用模块模式实现一个待办事项列表,但是得到错误 . $ store.todo是未定义的,无法找到与nuxt相关的内容

任何人都可以帮助我

store 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设置,我应该添加它一切正常

非常感谢

1 回答

  • 2

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

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

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

相关问题