반응형
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
반응형
'IT이야기' 카테고리의 다른 글
경고: prop 'className'이(가) 일치하지 않음. 의미-의리-반응과 함께 스타일 구성요소를 사용할 때 (0) | 2022.03.21 |
---|---|
사전은 Python 3.6+로 주문되었는가? (0) | 2022.03.21 |
Vue.js: 단일 파일 구성 요소에서 소품을 지정하는 방법? (0) | 2022.03.21 |
농담 - 간단한 테스트가 느림 (0) | 2022.03.21 |
VS 코드 확장 - 전체 경로 가져오기 (0) | 2022.03.21 |