Vuex_列表数据增删改查案例使用vuex，创建store仓库数据，通过四个按钮对数据实现增加删除，修改和查询。点击查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表增删改查</title>
    <script src="lib/vue.js"></script>
    <script src="lib/vuex.js"></script>
</head>
<body>
<div id="app">
    <div style="margin: 10px">
        <input type="text" v-model="addValue">&nbsp;&nbsp;<button @click="add">添加</button>&nbsp;&nbsp;<button @click="findOf">查找</button>
    </div>
    <div style="margin-top: 10px">
        <div style="margin: 10px" :key="index" v-for="(items,index) in this.$store.getters.search">
            <input :disabled = "items.editAble" @blur= "disabledItem(items.id)" type="text" v-model="items.value">&nbsp;&nbsp;
            <button @click="editValue(items.id)">编辑</button>&nbsp;&nbsp;<button @click="del(items.id)">删除</button>
        </div>
    </div>
</div>
<script>
    var store = new Vuex.Store({
        state:{
            list:[
                {
                    id:0,
                    value:'元素a',
                    editAble:true,//是否编辑元素
                    deleted:false,//该元素是否删除
                    isFind:true //该元素是否被找到
                },{
                    id:1,
                    value:'元素b',
                    editAble:true,
                    deleted:false,
                    isFind:true
                }
            ],
        },
        getters:{
          search:state => {
              return state.list.filter(todo => (todo.isFind && !todo.deleted))
          }
        },
        mutations: {
            increament(state, addVal) {
                var item = {}
                item.id = state.list.length
                item.value = addVal
                item.editAble = true
                item.deleted = false
                item.isFind = true
                state.list.push(item)
            },
            delete(state, val) {
                state.list.forEach(function (item) {
                    if (item.id == val) {
                        item.deleted = true
                    }
                })
            },
            edit(state,val){
                state.list.forEach(function (item) {
                    if (item.id == val) {
                        item.editAble = false
                    }
                })
            },
            findValue(state, addVal) {
                state.list.forEach(function (item) {
                    if(item.value == addVal){
                        item.isFind = true
                    }else if (addVal == ''){
                        state.list.forEach(function (item) {
                          item.isFind = true
                        })
                    }else {
                        item.isFind = false
                    }
                })
            },
            disabled(state,val){
                state.list.forEach(function (item) {
                    if (item.id == val) {
                        item.editAble = true
                    }
                })
            }
        }
    })
    var app = new Vue({
        el:'#app',
        data:{addValue:''},
        store,
        methods:{
            add(){
                this.$store.commit('increament',this.addValue)
            },
            del(value){
                this.$store.commit('delete',value)
            },
            editValue(value){
                this.$store.commit('edit',value)
            },
            findOf(){
                this.$store.commit('findValue',this.addValue)
            },
            disabledItem(value){
                this.$store.commit('disabled',value)
            }
        }
    })
</script>
</body>
</html>