<body>
<div id="app">
<h2>查询</h2>
<hr/>
<input type="text" v-model="id"/>
<input type="text" v-model="name"/>
<button @click="search">搜索</button>
<hr/>
<p>
查询结果如下：
{{this.$store.getters.search}}
<hr/>
以无序列表方式显示：<br/>
<ul>
<li v-for="item in this.$store.state.todos">{{item}}</li>
</ul>
</p >
</div>
<script>
//创建状态管理对象
const store=new Vuex.Store({
state:{
todos:[
{id:123,name:'小明',flag:true},
{id:123,name:'小红',flag:false},
{id:125,name:'jack',flag:true},
{id:126,name:'张三',flag:true},
{id:125,name:'rose',flag:true}
],
id:0
},
mutations:{
search(state,id){
state.id=id
}
},
getters:{
search:state=>{
return state.todos.filter(todo=>todo.id==state.id)
}
}
})
var vm=new Vue({
el:'#app',
data:{
id:'',
name:''
},
store,
methods:{
search(){
this.$store.commit('search',this.id)
}
}
})
</script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<body>
<div id="app">
<h2>查询</h2>
<hr/>
<input type="text" v-model="id"/>
<input type="text" v-model="name"/>
<button @click="search">搜索</button>
<hr/>
<p>
查询结果如下：
{{this.$store.getters.search}}
<hr/>
以无序列表方式显示：<br/>
<ul>
<li v-for="item in this.$store.state.todos">{{item}}</li>
</ul>
</p >
</div>
<script crossorigin="anonymous" integrity="sha512-XdUZ5nrNkVySQBnnM5vzDqHai823Spoq1W3pJoQwomQja+o4Nw0Ew1ppxo5bhF2vMug6sfibhKWcNJsG8Vj9tg==" src="https://lib.baomitu.com/vue/2.6.14/vue.min.js"></script>
<script crossorigin="anonymous" integrity="sha512-Tkxwo8dZEZTmje5QT9uodCqe2XGbZdBXU8uC4nskBt0kwR99Anzkz8JCSMByfoqjLTHcTuIB8fsmED3b9Ljp3g==" src="https://lib.baomitu.com/vuex/3.6.2/vuex.min.js"></script>
<script>
//创建状态管理对象
const store=new Vuex.Store({
state:{
todos:[
{id:123,name:'小明',flag:true},
{id:123,name:'小红',flag:false},
{id:125,name:'jack',flag:true},
{id:126,name:'张三',flag:true},
{id:125,name:'rose',flag:true}
],
id:0,
name:""
},
mutations:{
setId(state,id){
state.id=id
},
setName(state,name){
state.name=name
}
},
getters:{
search:state=>{
return state.todos.filter(todo=>todo.id==state.id && todo.name==state.name)
}
}
})
var vm=new Vue({
el:'#app',
data:{
id:'',
name:''
},
store,
methods:{
search(){
this.$store.commit('setId',this.id)
this.$store.commit('setName',this.name)
}
}
})
</script>
</body>
</body>
</html>
相对应地方也加上name
return state.todos.filter(todo=>todo.id==state.id&&todo.name==state.name)