vuex列表清单案例

 如上图，本案例功能为：

• 可展示列表，
• 可以添加清单，
• 可删除已完成的内容，
• 可展示剩余未完成的条数，
• 可筛选全部/未完成/已完成的列表
• 删除某条内容

（请忽略不美丽的css）

 index.vue

<template>
  <div class="list-container">
    <div class="search">
      <el-input :value='msg' @input='handleinput'></el-input>
      {{msg}}
      <el-input v-model='inputval' placeholder="请输入内容"></el-input><br /><br />
      <el-button type='primary' @click="handleAdd">添加</el-button>
    </div>
    <div class="content">
      <ul>
        <li v-for="item in getnewlist" :key='item.id'>
          <el-checkbox v-model="item.ischeck" @change="handlechange(item)">
            <div class="item">
              <div>{{item.title}}</div>
              <div @click="handledelete(item)">del</div>
            </div>
          </el-checkbox>
        </li>
      </ul>
    </div>
    <div class="total">
      <p>{{rest}}条剩余</p>
      <el-button @click="changelist('all')">
        全部
      </el-button>
      <el-button @click="changelist('undone')">
        未完成
      </el-button>
      <el-button @click="changelist('done')">
        已完成
      </el-button>
      <p @click="clearComplate">清除已完成</p>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations, mapGetters } from "vuex";
export default {
  name: "Vue3jsIndex",
  data() {
    return {
      inputval: "",
    };
  },
  computed: {
    ...mapState(["list", "id", "rest", "msg"]),
    ...mapGetters(["getnewlist"]),
  },
  created() {
    this.handlegetlist();
  },
  mounted() {},
  methods: {
    ...mapActions(["getlist", "addlistAsync"]),
    ...mapMutations(["restnum", "clear", "changekey", "changemsg","del"]),
    handlegetlist() {
      this.getlist();
    },
    handleAdd() {
      //把输入框中的数据添加到列表中
      let obj = {
        id: this.id,
        ischeck: false,
        title: this.inputval,
      };
      this.addlistAsync(obj);
      this.inputval = "";
      this.restnum();
    },
    handlechange(v) {
      this.restnum();
    },
    clearComplate() {
      this.clear();
    },
    changelist(v) {
      this.changekey(v);
    },
    handleinput(e) {
      this.changemsg(e);
    },
    handledelete(v) {
      this.del(v.id)
      this.restnum();
    }
  },
};
</script>

<style  scoped>
ul,
li {
  width: 100%;
}

.item {
  display: flex;
}
</style>

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios';
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    // 所有列表
    list: [],
    id: 4,
    rest: 0,
    key: 'all',
    msg:''

  },
  getters: {
    getnewlist(state) {
      if (state.key == 'all') {
        return state.list
      }else if(state.key=='undone') {
        let newlist = []
        state.list.forEach(v=> {
          if(!v.ischeck){
            newlist.push(v)
          }
        })
        return newlist
      }else if(state.key=='done') {
        let newlist = []
        state.list.forEach(v=> {
          if(v.ischeck){
            newlist.push(v)
          }
        })
        return newlist
      }
    }
  },
  mutations: {
    initlist(state, list) {
      state.list = list
    },
    addlist(state, obj) {
      state.list.push(obj)
    },
    addid(state) {
      state.id++;
    },
    restnum(state) {
      let restarr = [];
      state.list.forEach(v => {
        if (!v.ischeck) {
          restarr.push(v)
        }
      })
      state.rest = restarr.length;
    },
    clear(state) {
      let nocomplate = []
      state.list.forEach(v => {
        if (!v.ischeck) {
          nocomplate.push(v)
        }
      })
      state.list = nocomplate;
    },
    changekey(state,key) {
      state.key = key
    },
    changemsg(state,val) {
      state.msg = val;
    },
    del(state,id) {
      let i =state.list.findIndex(v=>v.id==id)
      if(i!=-1) {
        state.list.splice(i,1)
      }
    }
  },
  actions: {
    getlist({commit}) {
      axios.get('/list.json').then((res) => {
        console.log(res)
        commit('initlist', res.data)
        commit('restnum')
      })
    },
    addlistAsync(context, obj) {
      context.commit("addlist", obj)
      context.commit('addid')
    }
  },
  modules: {
  },

})

请求本地json数据，可将json文件写在public文件夹下，

list.json

[
  {
    "title": "list1",
    "id": 1,
    "ischeck": true
  },
  {
    "title": "list2",
    "id": 2,
    "ischeck": false
  },
  {
    "title": "list3",
    "id": 3,
    "ischeck": false
  }
]

补：el-input的:value绑定