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

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: ['ALL', 'UNDO', 'DONE'],
 filter: 'ALL'
}
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 connexes :

Exemple de fonction d'événement de bouton de déclenchement d'entrée implémentée par jQuery

jQuery+Cookie implémente la fonction de changement de skin

Exemple de code pour l'interaction entre les composants angulaires

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!