집 >웹 프론트엔드 >JS 튜토리얼 >vue + vuex(자세한 튜토리얼)라는 두 가지 기술을 통해 할 일 목록 구현

vue + vuex(자세한 튜토리얼)라는 두 가지 기술을 통해 할 일 목록 구현

亚连원래의: 2018-05-31 16:02:052256검색

이 글에서는 주로 vue + vuex todolist의 구현 예제 코드를 소개하고 있는데, 꽤 좋은 내용인 것 같아 참고용으로 올려보겠습니다.

todolist 데모

최근에 시간이 나면 다시 vuex를 살펴보고 작은 todolist 데모를 작성했습니다. 주로 코드 작성을 표준화했기 때문입니다. 주소: vue-test_jb51 .rar

Rendering

루트 구성 요소

<template>
 <p class=&#39;container&#39;>
 <h1 class=&#39;title&#39;>todo list demo</h1>
 <type-filter
 :types=&#39;types&#39;
 :filter=&#39;filter&#39;
 :handleUpdateFilter=&#39;handleUpdateFilter&#39;
 />
 <add-todo :handleAdd=&#39;handleAdd&#39; />
 <todo-item
 v-for=&#39;(item,index) in list&#39;
 :key=&#39;item.id&#39;
 :index=&#39;index&#39;
 :data=&#39;item&#39;
 :filter=&#39;filter&#39;
 :handleRemove=&#39;handleRemove&#39;
 :handleToggle=&#39;handleToggle&#39;
 />
 </p>
</template>

<script>
import { createNamespacedHelpers } from &#39;vuex&#39;
import TypeFilter from &#39;./filter&#39;
import AddTodo from &#39;./addTodo&#39;
import TodoItem from &#39;./item&#39;

const { mapState, mapMutations } = createNamespacedHelpers(&#39;TodoList&#39;)
export default {
 name: &#39;todo-list-demo&#39;,
 components: { TypeFilter, TodoItem, AddTodo },
 computed: {
 ...mapState([&#39;list&#39;, &#39;types&#39;, &#39;filter&#39;])
 },
 methods: {
 ...mapMutations([
 &#39;handleAdd&#39;,
 &#39;handleRemove&#39;,
 &#39;handleToggle&#39;,
 &#39;handleUpdateFilter&#39;
 ])
 }
}
</script>

<style lang=&#39;scss&#39; scoped>
@import &#39;./style.scss&#39;;
</style>

필터 조건 구성 요소

<template>
 <ul class=&#39;types&#39;>
 <li
 v-for=&#39;(item,index) in types&#39;
 :key=&#39;index + item&#39;
 :class=&#39;filterClass(item)&#39;
 @click=&#39;handleUpdateFilter(item)&#39;
 >{{item}}</li>
 </ul>
</template>

<script>
export default {
 name: &#39;type-filter&#39;,
 props: [&#39;types&#39;, &#39;filter&#39;, &#39;handleUpdateFilter&#39;],
 methods: {
 filterClass(filter) {
 return { filter: true, active: filter === this.filter }
 }
 }
}
</script>

<style lang=&#39;scss&#39; scoped>
@import &#39;./style.scss&#39;;
</style>

에 추가 컴포넌트

<template>
 <input
 type=&#39;text&#39;
 name=&#39;add-todo&#39;
 id=&#39;add-todo-input&#39;
 class=&#39;add-todo&#39;
 @keyup.enter=&#39;add&#39;
 placeholder=&#39;input then hit enter&#39;
 />
</template>

<script>
export default {
 name: &#39;add-todo&#39;,
 props: [&#39;handleAdd&#39;],
 methods: {
 add(e) {
 const val = e.target.value.trim()
 if (val) {
 this.handleAdd({
  id: new Date().getTime(),
  message: val,
  status: false
 })
 e.target.value = &#39;&#39;
 }
 }
 }
}
</script>

<style lang=&#39;scss&#39; scoped>
@import &#39;./style.scss&#39;;
</style>

단일 할 일 구성 요소

<template>
 <p v-if=&#39;show&#39; class=&#39;todo-item&#39;>
 <span
 :class=&#39;messageClass(data.status)&#39;
 @click=&#39;handleToggle(data.id)&#39;
 >{{index+1}}. {{data.message}}<i class=&#39;date&#39;>{{dateFormat(data.id)}}</i></span>
 <span
 class=&#39;delete&#39;
 @click=&#39;handleRemove(data.id)&#39;
 >Delete</span>
 </p>
</template>

<script>
export default {
 name: &#39;todo-items&#39;,
 props: [&#39;data&#39;, &#39;filter&#39;, &#39;index&#39;, &#39;handleRemove&#39;, &#39;handleToggle&#39;],
 computed: {
 show() {
 return (
 this.filter === &#39;ALL&#39; ||
 (this.filter === &#39;UNDO&#39; && !this.data.status) ||
 (this.filter === &#39;DONE&#39; && this.data.status)
 )
 }
 },
 methods: {
 dateFormat(time) {
 const date = new Date(time)
 return `(${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()})`
 },
 messageClass: status => ({ message: true, done: status })
 }
}
</script>

<style lang=&#39;scss&#39; scoped>
@import &#39;./style.scss&#39;;
</style>

vuex 부분(모듈)

const state = {
 list: [],
 types: [&#39;ALL&#39;, &#39;UNDO&#39;, &#39;DONE&#39;],
 filter: &#39;ALL&#39;
}
const mutations = {
 handleAdd(state, item) {
 state.list = [...state.list, item]
 },
 handleRemove(state, id) {
 state.list = state.list.filter(obj => obj.id !== id)
 },
 handleToggle(state, id) {
 state.list = state.list.map(
 obj => (obj.id === id ? { ...obj, status: !obj.status } : obj)
 )
 },
 handleUpdateFilter(state, filter) {
 state.filter = filter
 }
}
export default {
 namespaced: true,
 state,
 mutations
}

위 내용은 앞으로 모두에게 도움이 되기를 바랍니다.

vue + vuex(자세한 튜토리얼)라는 두 가지 기술을 통해 할 일 목록 구현

관련 기사