Vuex搜索小案例 - 彭先生博客

首页

Vuex搜索小案例

4月

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>