vue小案例---todolist

import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    list: [],
  },
  mutations: {
    setlist(state, data) {
      data.map((item) => {
        item.zt = false;
      });
      state.list = data;
    },
    setZt(state, data) {
      state.list.map((item) => {
        if (item.id == data) {
          item.zt = !item.zt;
        }
      });
    },
    setAdd(state,data){
      state.list.unshift({body:data,zt:false,id:Date.now()})
    }
  },
  actions: {
    async setData(commit, limit = 10) {
      var res = await axios.get(
        "http://jsonplaceholder.typicode.com/posts?_limit=" + limit
      );
      console.log(res.data);
      this.commit("setlist", res.data);
    },
  },
  modules: {},
});

.total {
  width: 1300px;
  min-height: 400px;
  margin: 0 auto;
  .inp {
    width: 90%;
    height: 50px;
    background: red;
    margin: 0 auto;
    display: flex;
    input {
      height: 100%;
      border: 0px;
      outline: 0px;
      padding-left: 10px;
      flex-grow: 1;
    }
    button {
      width: 100px;
      height: 100%;
      margin: 0px;
    }
  }
  .sel {
    width: 90%;
    height: 50px;
    margin: 10px auto;
    .sx {
      display: flex;
      justify-content: space-around;
      .no::before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: darkred;
        margin-right: 4px;
      }
      .yes::before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: red;
        margin-right: 4px;
      }
      div {
        vertical-align: middle;
        cursor: pointer;
      }
    }
  }
  .list {
    width: 90%;
    min-height: 100px;
    // background: red;
    margin: 10px auto;
    display: flex;
    flex-wrap: wrap;
    gap: 5%;

    .lists {
      width: 30%;
      min-height: 60px;
      border-radius: 5px;
      background: darkred;
      padding: 10px;
      box-sizing: border-box;
      margin:10px 0;
      color: #fff;
      overflow: hidden;
    }
    .active {
      background: red;
    }
  }
}