vue3+vant4+vuex4实现todolist备忘录案例

 1     <van-cell-group>
 2       <van-cell>
 3         <van-row>
 4           <van-col span="20">
 5             <van-field
 6               :value="content"
 7               @change="handleChange"
 8               placeholder="请输入内容"
 9             />
10           </van-col>
11           <van-col span="4">
12             <van-button type="primary" @click="onClickAdd" size="small"
13               >添加</van-button
14             >
15           </van-col>
16         </van-row>
17       </van-cell>
18       <van-cell v-for="(item, index) in listItem" :key="index">
19         <van-row class="bg flex">
20           <van-col span="2">
21             <van-checkbox
22               v-model="item.checked"
23               shape="square"
24               @change="onChange(item, index, $event)"
25             >
26             </van-checkbox>
27           </van-col>
28           <van-col span="16">
29             <div v-if="!item.checked" class="name">{{ item.name }}</div>
30             <van-field v-else v-model="item.name" placeholder="请输入内容" />
31           </van-col>
32           <van-col span="4">
33             <span @click="onClickDelete(item, index)" class="fontColor"
34               >删除</span
35             >
36           </van-col>
37         </van-row>
38       </van-cell>
39       <van-empty
40         v-if="listItem.length == 0"
41         image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
42         image-size="40"
43         description="暂无数据"
44       />
45 
46       <div class="footer flex" v-if="items.length != 0">
47         <span>剩余{{ notFinsh }}项</span>
48         <van-tabs
49           v-model:active="active"
50           @click-tab="onClickTab"
51           shrink
52           type="card"
53           size="small"
54         >
55           <van-tab title="全部"></van-tab>
56           <van-tab title="未完成"></van-tab>
57           <van-tab title="已完成"></van-tab>
58         </van-tabs>
59         <span type="primary" @click="onClickClear" class="fontColor"
60           >删除已完成</span
61         >
62       </div>
63     </van-cell-group>

 1 <script>
 2 import { useStore, mapState, mapGetters } from 'vuex'
 3 import { showToast } from 'vant'
 4 import { showConfirmDialog } from 'vant'
 5 import { ref, computed } from 'vue'
 6 export default {
 7   setup() {
 8     const store = useStore()
 9     const active = ref('1')
10     const content = computed(() => store.state.content)
11     const items = computed(() => store.state.items)
12     console.log('store', store)
13     function onClickAdd() {
14       console.log('content', content)
15       if (content.value == '') {
16         showToast('输入内容不能为空')
17       } else {
18         store.commit('addItem')
19       }
20     }
21     function handleChange(e) {
22       store.commit('setInputValue', e.target.value)
23     }
24     function onClickDelete(item, i) {
25       showConfirmDialog({
26         title: '提示',
27         message: '您确定要' + item.name + '删除吗？',
28       })
29         .then(() => {
30           store.commit('deleteItem', i)
31         })
32         .catch(() => {})
33     }
34     function onChange(item, index, e) {
35       item.checked != item.checked
36       //store.commit('onChangeChecked', index, e.target.value)
37       //console.log('items', items.value)
38     }
39     function onClickClear() {
40       store.commit('clearItem')
41     }
42     function onClickTab(val) {
43       store.commit('changeItem', val.name)
44     }
45     return {
46       active,
47       onClickAdd,
48       onClickTab,
49       onClickClear,
50       onChange,
51       onClickDelete,
52       handleChange,
53       content,
54       items,
55     }
56   },
57   computed: {
58     ...mapGetters(['notFinsh', 'listItem']),
59     // ...mapState(['items', 'value',listItem]),
60   },
61 }
62 </script>
63 <style scoped>
64 .bg {
65   background: #fff;
66   width: 100%;
67 }
68 .fontColor {
69   color: #3071f1;
70   font-size: 12px;
71 }
72 .flex {
73   display: flex;
74   justify-content: space-between;
75   align-items: center;
76 }
77 .name {
78   text-align: left;
79   padding: 14px;
80 }
81 .bg >>> .van-field__control:focus {
82   outline: none;
83   border-color: #409eff;
84 }
85 .footer {
86   padding: 20px;
87 }
88 </style>