通過vue+vuex這2樣技術(shù)實(shí)現(xiàn)todolist（詳細(xì)教程）

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 19:43:15

通過vue+vuex這2樣技術(shù)實(shí)現(xiàn)todolist（詳細(xì)教程）

通過vue+vuex這2樣技術(shù)實(shí)現(xiàn)todolist（詳細(xì)教程）:這篇文章主要介紹了vue + vuex todolist的實(shí)現(xiàn)示例代碼，我覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。todolist demo最近有空重新看了一下vuex,然后又寫了一個(gè)todolist小demo,原理比較簡單,主要是自己規(guī)范了一下代碼的寫法.下載地址 :vue-te

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀通過vue+vuex這2樣技術(shù)實(shí)現(xiàn)todolist（詳細(xì)教程）:這篇文章主要介紹了vue + vuex todolist的實(shí)現(xiàn)示例代碼，我覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。todolist demo最近有空重新看了一下vuex,然后又寫了一個(gè)todolist小demo,原理比較簡單,主要是自己規(guī)范了一下代碼的寫法.下載地址 :vue-te

這篇文章主要介紹了vue + vuex todolist的實(shí)現(xiàn)示例代碼，我覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。

todolist demo

最近有空重新看了一下vuex,然后又寫了一個(gè)todolist小demo,原理比較簡單,主要是自己規(guī)范了一下代碼的寫法.

下載地址 :vue-test_jb51.rar

效果圖

根組件

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

<script>
import { createNamespacedHelpers } from 'vuex'
import TypeFilter from './filter'
import AddTodo from './addTodo'
import TodoItem from './item'

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

<style lang='scss' scoped>
@import './style.scss';
</style>

過濾條件組件

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

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

<style lang='scss' scoped>
@import './style.scss';
</style>

添加待辦組件

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

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

<style lang='scss' scoped>
@import './style.scss';
</style>

單個(gè)待辦事項(xiàng)組件

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

<script>
export default {
 name: 'todo-items',
 props: ['data', 'filter', 'index', 'handleRemove', 'handleToggle'],
 computed: {
 show() {
 return (
 this.filter === 'ALL' ||
 (this.filter === 'UNDO' && !this.data.status) ||
 (this.filter === 'DONE' && 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='scss' scoped>
@import './style.scss';
</style>

vuex部分(模塊)

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
}

上面是我整理給大家的，希望今后會(huì)對(duì)大家有幫助。

相關(guān)文章：

jQuery實(shí)現(xiàn)的回車觸發(fā)按鈕事件功能示例

jQuery+Cookie實(shí)現(xiàn)切換皮膚功能

Angular 組件之間的交互的示例代碼

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com