IT이야기

nuxtjs의 vuex 모듈 모드

cyworld 2022. 3. 21. 09:03
반응형

nuxtjs의 vuex 모듈 모드

나는 vuex 스토어에서 모듈 모드를 사용하여 nuxjs의 작업관리 목록을 구현하려고 하는데 이 오류가 발생했어.$store.todo는 정의되지 않았으며 nuxt와 관련하여 이 문제에 대해 많은 것을 찾을 수 없음

누가 좀 도와줄래?

store index.js.s.

export const state = () => ({

})

export const mutations = {

}

할 일을 저장하다js

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

export const mutations = {
  mutations ...
}

export const actions = {
  actions ...
} 

export const getters = {
  getters ...
}

인덱스.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>

내가 읽은 바로는 이게 효과가 있어야 한다고 생각했지만, 효과가 없다.

모듈 모드를 사용하지 않고 인덱스가 하나만 설정되면 모든 기능이 정상적으로 작동하도록 추가해야 한다.

대단히 고맙습니다

다르게 불러야 해

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

또한 생성되지 않고 가져오는 방법으로 호출하는 것이 좋다.

참조URL: https://stackoverflow.com/questions/50856888/vuex-module-mode-in-nuxtjs

반응형