一个简易的手机端todo

**vuex的操作**
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

import VuexPersist from "vuex-persist";

const vuexLocal = new VuexPersist({
    storage: window.sessionStorage,
})

export default new Vuex.Store({
    state: {
        list: [], //接收文本框的值
    },
    mutations: {
        //添加的操作
        addlist(state, name) {
            state.list.push(name);
        },
        // 改变值
        addchange(state, index) {
            console.log(state.list[index])
            let { checked } = state.list[index];
            if (checked == true) {
                state.list[index].numsb = 2;
            } else {
                state.list[index].numsb = 1;
            }
        },
        addname(state, index) {
            state.list[index].numsb = 3;
        },
        del(state, k) {
            state.list.splice(k, 1)
        },
        isedit(state, index) {
            state.list[index].isEdit = !state.list[index].isEdit
        }
    },
    actions: {

    },
    getters: {
        gnum(state) {
            let obj = {
                ondo: 0,
                done: 0,
                cancel: 0,
            };
            state.list.forEach(item => {
                switch (item.numsb) {
                    case 1:
                        obj.ondo++;
                        break;
                    case 2:
                        obj.done++;
                        break;
                    case 3:
                        obj.cancel++;
                        break;
                }
            });
            return obj;
        }
    },
    plugins: [vuexLocal.plugin],
})

**vue组件内的样式以及操作**

<template>
  <div>
    <!-- 头部区域 -->
    <van-nav-bar title="三个状态来回跳">
      <template #right>
        <van-icon size="25" color="#fff" name="like-o" @click="show = true" />
      </template>
    </van-nav-bar>
    <!-- 头部区域 -->
    <!-- 文本添加区域 -->
    <van-row>
      <van-col span="20">
        <van-field
          v-model="textlist"
          rows="2"
          autosize
          type="textarea"
          maxlength="50"
          placeholder="输入你想干的事"
          show-word-limit
        />
      </van-col>
      <van-col span="4">
        <van-button color="#7232dd" @click="addlist">添加</van-button>
      </van-col>
    </van-row>
    <!-- 文本添加区域 -->
    <!-- tab标签切换 -->
    <van-tabs v-model="numsb" type="card" @click="changeTab">
      <van-tab title="未完成" name="1" :badge="$store.getters.gnum.ondo">
      </van-tab>
      <van-tab title="已完成" name="2" :badge="$store.getters.gnum.done">
      </van-tab>
      <van-tab title="回收站" name="3" :badge="$store.getters.gnum.cancel">
      </van-tab>
    </van-tabs>
    <!-- tab标签切换 -->
    <!-- 内容显示区域 -->
    <!-- 操作state添加入list渲染到页面 -->
    <div v-for="(item, index) in $store.state.list" :key="index">
      <!-- 未完成 -->
      <van-row v-if="item.numsb == numsb">
        <van-col span="6">
          <van-checkbox
            v-model="item.checked"
            shape="square"
            @click="change(index)"
          ></van-checkbox>
        </van-col>
        <van-col span="14">
          <span @click="isedit(index)" v-if="item.isEdit == false">{{
            item.textlist
          }}</span>
          <input
            type="text"
            v-model="item.textlist"
            v-show="item.isEdit"
            @blur="isedit(index)"
            v-focus
          />
        </van-col>
        <van-col span="4">
          <van-button
            plain
            hairline
            type="primary"
            @click="addname(index)"
            v-if="item.numsb == 1"
            >标为已读</van-button
          >
          <div v-if="item.numsb == 2">{{ item.time | fromData }}</div>
          <van-button
            plain
            hairline
            type="primary"
            v-if="item.numsb == 3"
            @click="del(index)"
            >删除</van-button
          >
        </van-col>
      </van-row>
    </div>
    <!-- 内容显示区域 -->
    <!-- 遮罩层 -->
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper">
        <div class="block" />
      </div>
    </van-overlay>
    <!-- 遮罩层 -->
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: [],
  // 局部注册的组件
  components: {},

  directives: {
    focus: {
      inserted(el, bi) {
        el.focus();
      },
    },
  },

  // 组件状态值
  data() {
    return {
      textlist: "", //文本框的值
      numsb: 1,
      show: false,
      value: "",
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    ...mapMutations(["addname", "del", "isedit"]),
    addlist() {
      let obj = {
        textlist: this.textlist,
        checked: false, //复选框是否选中
        numsb: this.numsb, //切换的状态
        isEdit: false, //
        time: new Date().getTime(), //当前时间戳
      };
      this.$store.commit("addlist", obj);
      this.$toast.success(
        "？？？？？？？？"
      );
      this.textlist = "";
    },
    // 头部切换
    changeTab(name, title) {
      console.log(name, title);
    },
    change(index) {
      console.log(index);
      this.$store.commit("addchange", index);
    },
  },
  // 过滤器
  filters: {
    fromData(val) {
      // 年也日
      let year = new Date(val).getFullYear(); //年
      let month = new Date(val).getMonth() + 1; //月
      let ydata = new Date(val).getDate(); //日
      return `${year}-${month.toString()}-${ydata.toString()}`;
    },
  },

};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style lang="scss" scoped>
.van-nav-bar {
  background: rgb(109, 243, 51);
}
.van-row {
  margin-top: 10px;
  line-height: 50px;
}
.van-checkbox {
  margin-top: 10px;
  margin-left: 5px;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
</style>