首页
   /       /   
Vuex搜索小案例
4月
26
Vuex搜索小案例
作者:大彭Sir    分类: 学习笔记

什么情况下应该使用 Vuex?

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>
本文标签:标签: VUE Vuex
责任声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!
转载声明:本文作者大彭Sir,如需转载请保留文章出处!原文链接请自行复制!

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录