Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果不打算开发大型单页应用,应用够简单,最好不要使用 Vuex。一个简单的 store 模式就足够了。但是,如果需要构建一个中大型单页应用,就要考虑如何更好地在组件外部管理状态,Vuex 是不错的选择。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/vuex.js"></script>
</head>
<body>
<div id="app">
<h3>列表查询</h3>
<input v-model="id" type="text">
<input v-model="name" type="text">
<input type="submit" @click="search" value="搜索id">
<input type="submit" @click="searchName" value="搜索name">
<hr>
<p>
搜索结果{{this.$store.getters.search}}
搜索结果{{this.$store.getters.searchName}}
</p>
<ul>
<li v-for="item in this.$store.state.todos">{{item}}</li>
</ul>
<!-- {{this.$store.state.id}}-->
</div>
</body>
<script>
//创建一个store对象
var store = new Vuex.Store({
getters:{
search:state=>{
return state.todos.filter(todo=>todo.id==state.id)
},
searchName:state=>{
return state.todos.filter(todo=>todo.text.indexOf(state.name)!=-1)
}
},
state:{
todos:[
{id:1,text:'张三'},
{id:2,text:'李四'},
{id:3,text:'王五'},
{id:4,text:'赵六'},
{id:5,text:'刘星宇'},
],
id:0,
name:""
},
//修改store对象中的数据
mutations:{
search(state,id){
state.id = id;//将store中的id修改
},
searchName(state,name){
state.name = name;//将store中的id修改
}
}
})
new Vue({
el:"#app",
data:{
id:'',
name: ""
},
store,
methods:{
search:function () {
//调用mutations中的search方法
this.$store.commit('search',this.id);
},
searchName:function () {
//调用mutations中的search方法
this.$store.commit('searchName',this.name);
}
}
})
</script>
</html>
666大哥