生活随笔
收集整理的这篇文章主要介绍了
基于vue和vuex的todos效果展示及源码分享
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
todos,待做项目经常被以各种方式来实现，js,node,
这里分享一个基于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="请输入任务" class="my_ipt" :value="inputValue"@change="handleInputChange"/><a-button type="primary" @click="addItemToList">添加事项</a-button><a-list bordered :dataSource="infoList" class="dt_list"><a-list-item slot="renderItem" slot-scope="item"><!-- 复选框 --><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区域 --><div slot="footer" class="footer"><!-- 未完成的任务个数 --><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><!-- 把已经完成的任务清空 --><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('文本框内容不能为空！')}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位技术专家面对面20年技术见证，附赠技术全景图
总结
以上是生活随笔为你收集整理的基于vue和vuex的todos效果展示及源码分享的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。
