Maison >interface Web >js tutoriel >Implémenter todolist via deux technologies : vue + vuex (tutoriel détaillé)

Implémenter todolist via deux technologies : vue + vuex (tutoriel détaillé)

亚连original: 2018-05-31 16:02:052256parcourir

Cet article présente principalement l'exemple de code d'implémentation de vue + vuex todolist. Je pense que c'est plutôt bien, je vais le partager avec vous maintenant et le donner comme référence.

Démo de Todolist

J'ai récemment revu vuex quand j'avais le temps, puis j'ai écrit une petite démo de Todolist. Le principe est relativement simple, principalement parce que je l'ai standardisé moi-même. Voici comment écrire le code.

Adresse de téléchargement : vue-test_jb51.rar

Rendu

Composant racine

<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>

Composant d'état du filtre

<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>

Ajouter un composant à faire

<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>

Composant à faire unique

<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>

partie vuex (module)

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
}

Ce qui précède est ce que j'ai compilé pour vous, j'espère qu'il vous sera utile à l'avenir. Utile.

Articles Liés

Voir plus