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

案例用的是vant-ui库，你可换成你自己用的ui库即可。

 

功能需求分析：

1. 添加事项
2. 删除事项
3. 已完成删除
4. 筛选：已完成、未完成
5. 统计：剩余事项个数

安装vuex依赖包

npm install vuex --save

案例图片如下：

 

    <van-cell-group>
      <van-cell>
        <van-row>
          <van-col span="20">
            <van-field
              :value="content"
              @change="handleChange"
              placeholder="请输入内容"
            />
          </van-col>
          <van-col span="4">
            <van-button type="primary" @click="onClickAdd" size="small"
              >添加</van-button
            >
          </van-col>
        </van-row>
      </van-cell>
      <van-cell v-for="(item, index) in listItem" :key="index">
        <van-row class="bg flex">
          <van-col span="2">
            <van-checkbox
              v-model="item.checked"
              shape="square"
              @change="onChange(item, index, $event)"
            >
            </van-checkbox>
          </van-col>
          <van-col span="16">
            <div v-if="!item.checked" class="name">{{ item.name }}</div>
            <van-field v-else v-model="item.name" placeholder="请输入内容" />
          </van-col>
          <van-col span="4">
            <span @click="onClickDelete(item, index)" class="fontColor"
              >删除</span
            >
          </van-col>
        </van-row>
      </van-cell>
      <van-empty
        v-if="listItem.length == 0"
        image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
        image-size="40"
        description="暂无数据"
      />

      <div class="footer flex" v-if="items.length != 0">
        <span>剩余{{ notFinsh }}项</span>
        <van-tabs
          v-model:active="active"
          @click-tab="onClickTab"
          shrink
          type="card"
          size="small"
        >
          <van-tab title="全部"></van-tab>
          <van-tab title="未完成"></van-tab>
          <van-tab title="已完成"></van-tab>
        </van-tabs>
        <span type="primary" @click="onClickClear" class="fontColor"
          >删除已完成</span
        >
      </div>
    </van-cell-group>

js和css代码如下：

<script>
import { useStore, mapState, mapGetters } from 'vuex'
import { showToast } from 'vant'
import { showConfirmDialog } from 'vant'
import { ref, computed } from 'vue'
export default {
  setup() {
    const store = useStore()
    const active = ref('1')
    const content = computed(() => store.state.content)
    const items = computed(() => store.state.items)
    function onClickAdd() {
      if (content.value == '') {
        showToast('输入内容不能为空')
      } else {
        store.commit('addItem')
      }
    }
    function handleChange(e) {
      store.commit('setInputValue', e.target.value)
    }
    function onClickDelete(item, i) {
      showConfirmDialog({
        title: '提示',
        message: '您确定要' + item.name + '删除吗？',
      })
        .then(() => {
          store.commit('deleteItem', i)
        })
        .catch(() => {})
    }
    function onChange(item, index, e) {
      item.checked != item.checked
    }
    function onClickClear() {
      store.commit('clearItem')
    }
    function onClickTab(val) {
      store.commit('changeItem', val.name)
    }
    return {
      active,
      onClickAdd,
      onClickTab,
      onClickClear,
      onChange,
      onClickDelete,
      handleChange,
      content,
      items,
    }
  },
  computed: {
    ...mapGetters(['notFinsh', 'listItem']),
  },
}
</script>
<style scoped>
.bg {
  background: #fff;
  width: 100%;
}
.fontColor {
  color: #3071f1;
  font-size: 12px;
}
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.name {
  text-align: left;
  padding: 14px;
}
.bg >>> .van-field__control:focus {
  outline: none;
  border-color: #409eff;
}
.footer {
  padding: 20px;
}
</style>

main.js引用vuex，并挂载到vue

import store from './store';
app.use(router).use(store);

 

 sotore.js代码如下：

import { createStore } from 'vuex'

export default createStore({
    state:{
        content:'',
        active:"",
        items:[{
            "name": "1111",
            "id": "1",
            "checked": false
        },{
            "name": "222",
            "id": "2",
            "checked": true
        },{
            "name": "333",
            "id": "3",
            "checked": false
        }],
        id:0,
    },
    mutations:{
        onChangeChecked(state,index,val){
            state.items[index].name = val
        },
        todoUpdata(state,index,val){
            state.items[index].name = val
        },
        setInputValue(state,val){
            state.content = val
        },
       addItem(state){
        var obj = {
            "name": state.content,
            "id": state.id,
            "checked": false
        }
        console.log("obj",obj)
        state.items.unshift(obj)
        state.id ++
        state.content = ""
       },
       deleteItem(state,i){
        state.items.splice(i,1)
       },
       clearItem(state){
        state.items = state.items.filter(x=>x.checked===false)
       },
       changeItem(state,val){
            state.active = val
       }
    },
    actions:{
       
    },
    getters:{
       notFinsh(state){
        return state.items.filter(x=>x.checked===false).length
       },
       listItem(state){
            //0全部 1未完成  2已完成
            if(state.active==0){
                return state.items
            }
            if(state.active==1){
                return state.items.filter(x=>!x.checked)
            }
            if(state.active==2){
                return state.items.filter(x=>x.checked)
            }
            return state.items
       }
    }
}) 

            

                   QQ群：659182980                                               微信群 ：扫一扫即可添加入群

         欢迎扫码加群，一起讨论，共同学习成长！