生活随笔
收集整理的這篇文章主要介紹了
基于vue和vuex的todos效果展示及源码分享
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
todos,待做項(xiàng)目經(jīng)常被以各種方式來實(shí)現(xiàn)，js,node,
這里分享一個(gè)基于vue和vuex的todos
主要有三部分代碼main.js,index.js,App.vue
import Vue
from 'vue'
import App
from './App.vue'
import Antd
from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import store
from './store/index'
Vue
.config
.productionTip
= false
Vue
.use(Antd
)new Vue({render
: h
=> h(App
),store
}).$mount('#app')
import Vue
from 'vue'
import Vuex
from 'vuex'
import axios
from 'axios'Vue
.use(Vuex
)export default new Vuex.Store({state
: {list
: [],inputValue
: 'abc',nextId
: 5,viewKey
: 'all'},mutations
: {initList(state
, list
) {state
.list
= list
},setInputValue(state
, val
) {state
.inputValue
= val
},addItem(state
) {const obj
= {id
: state
.nextId
,info
: state
.inputValue
.trim(),done
: false}state
.list
.push(obj
)state
.nextId
++state
.inputValue
= ''},removeItem(state
, id
) {const i
= state
.list
.findIndex(x
=> x
.id
=== id
)if (i
!== -1) {state
.list
.splice(i
, 1)}},changeStatus(state
, param
) {const i
= state
.list
.findIndex(x
=> x
.id
=== param
.id
)if (i
!== -1) {state
.list
[i
].done
= param
.status
}},cleanDone(state
) {state
.list
= state
.list
.filter(x
=> x
.done
=== false)},changeViewKey(state
, key
) {state
.viewKey
= key
}},actions
: {getList(context
) {axios
.get('../list.json').then(({ data
}) => {context
.commit('initList', data
)})}},getters
: {unDoneLength(state
) {return state
.list
.filter(x
=> x
.done
== false).length
},infoList(state
) {if (state
.viewKey
=== 'all') {return state
.list
} else if (state
.viewKey
=== 'undone') {return state
.list
.filter(x
=> !x
.done
)} else if (state
.viewKey
=== 'done') {return state
.list
.filter(x
=> x
.done
)} else {return state
.list
}}},modules
: {}
})
<template><div id="app"><a-input placeholder="請(qǐng)輸入任務(wù)" class="my_ipt" :value="inputValue"@change="handleInputChange"/><a-button type="primary" @click="addItemToList">添加事項(xiàng)</a-button><a-list bordered :dataSource="infoList" class="dt_list"><a-list-item slot="renderItem" slot-scope="item"><!-- 復(fù)選框 --><a-checkbox :checked="item.done" @change="(e)=>{cbStatusChanged(e,item.id)}">{{item.info}}</a-checkbox><!-- 刪除鏈接 --><a slot="actions" @click="removeItemById(item.id)">刪除</a></a-list-item><!-- footer區(qū)域 --><div slot="footer" class="footer"><!-- 未完成的任務(wù)個(gè)數(shù) --><span>{{unDoneLength}}條剩余</span><!-- 操作按鈕 --><a-button-group><a-button :type="viewKey==='all'?'primary':'default'" @click="changeList('all')">全部</a-button><a-button :type="viewKey==='undone'?'primary':'default'" @click="changeList('undone')">未完成</a-button><a-button :type="viewKey==='done'?'primary':'default'" @click="changeList('done')">已完成</a-button></a-button-group><!-- 把已經(jīng)完成的任務(wù)清空 --><a @click="clean">清除已完成</a></div></a-list></div>
</template><script>
import {mapState,mapGetters} from 'vuex'export default {name: 'app',data() {return {}},created(){this.$store.dispatch('getList')},computed:{...mapState(['inputValue','viewKey']),...mapGetters(['unDoneLength','infoList'])},methods:{handleInputChange(e){// console.log(e.target.value);this.$store.commit('setInputValue',e.target.value)},addItemToList(){if(this.inputValue.trim().length <= 0){return this.$message.warning('文本框內(nèi)容不能為空！')}this.$store.commit('addItem')},removeItemById(id){this.$store.commit('removeItem',id)},cbStatusChanged(e,id){const param = {id:id,status:e.target.checked}this.$store.commit('changeStatus',param)},clean(){this.$store.commit('cleanDone')},changeList(key){this.$store.commit('changeViewKey',key)}}
}
</script><style scoped>
#app {padding: 10px;
}.my_ipt {width: 500px;margin-right: 10px;
}.dt_list {width: 500px;margin-top: 10px;
}.footer {display: flex;justify-content: space-between;align-items: center;
}
</style>
源碼鏈接: link.
與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖
總結(jié)
以上是生活随笔為你收集整理的基于vue和vuex的todos效果展示及源码分享的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
