Vue CLI 本地存储自定义事件-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue CLI 本地存储自定义事件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

3.8. WebStorage（js 本地存储）

存储内容大小一般支持 **5MB **左右（不同浏览器可能还不一样）

浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制

相关API

xxxStorage.setItem(‘key’, ‘value’)：该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值
xxxStorage.getItem(‘key’)：该方法接受一个键名作为参数，返回键名对应的值
xxxStorage.removeItem(‘key’)：该方法接受一个键名作为参数，并把该键名从存储中删除
xxxStorage.clear()：该方法会清空存储中的所有数据

备注

SessionStorage：存储的内容会随着浏览器窗口关闭而消失
LocalStorage：存储的内容，需要手动清除才会消失
xxxStorage.getItem(xxx)：如果 xxx 对应的 value 获取不到，那么getItem()的返回值是null

localStorage

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>localStorage</title>
</head>
<body>
    <h2>localStorage</h2>
    <button onclick="saveDate()">点我保存数据</button><br/>
    <button onclick="readDate()">点我读数据</button><br/>
    <button onclick="deleteDate()">点我删除数据</button><br/>
    <button onclick="deleteAllDate()">点我清空数据</button><br/>

    <script>
        let person = {
            name:"JOJO",
            age:20
        };

        function saveDate() {
            localStorage.setItem('msg', 'localStorage');
            localStorage.setItem('person', JSON.stringify(person));
        }
        function readDate() {
            console.log(localStorage.getItem('msg'));
            const person = localStorage.getItem('person');
            console.log(JSON.parse(person))
        }
        function deleteDate() {
            localStorage.removeItem('msg');
            localStorage.removeItem('person');
        }
        function deleteAllDate() {
            localStorage.clear();
        }
    </script>
</body>
</html>

sessionStorage

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sessionStorage</title>
</head>
<body>
    <h2>sessionStorage</h2>
    <button onclick="saveDate()">点我保存数据</button><br/>
    <button onclick="readDate()">点我读数据</button><br/>
    <button onclick="deleteDate()">点我删除数据</button><br/>
    <button onclick="deleteAllDate()">点我清空数据</button><br/>

    <script>
        let person = {
            name:"JOJO",
            age:20
        };

        function saveDate() {
            sessionStorage.setItem('msg', 'sessionStorage');
            sessionStorage.setItem('person', JSON.stringify(person));
        }
        function readDate() {
            console.log(sessionStorage.getItem('msg'));
            const person = sessionStorage.getItem('person');
            console.log(JSON.parse(person))
        }
        function deleteDate() {
            sessionStorage.removeItem('msg');
            sessionStorage.removeItem('person');
        }
        function deleteAllDate() {
            sessionStorage.clear();
        }
    </script>
</body>
</html>

使用本地存储优化Todo-List

<template>
    <div id="root"> 
        <div class="todo-container"> 
            <div class="todo-wrap">
                <MyHeader :addTodo="addTodo"/>
                <MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/>
                <MyFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"/>
            </div>
        </div>
    </div>
</template> 

<script> 
    // 引入组件
    import MyFooter from './components/MyFooter';
    import MyHeader from './components/MyHeader';
    import MyList from './components/MyList';

    export default { 
        name:'App', 
        components:{
            MyFooter,
            MyHeader,
            MyList
        },
        data() {
            return {
                // 从本地存储中获得数据，null就创建空数组[]
                todos: JSON.parse(localStorage.getItem('todos')) || []
            }
        },
        methods: {
            // 添加一个todo
            addTodo(todoObj) {
                this.todos.unshift(todoObj);
            },
            // 勾选or取消勾选一个todo
            checkTodo(id) {
                this.todos.forEach((todo)=>{
                    if(todo.id === id) todo.done = !todo.done;
                });
            },
            // 删除一个todo
            deleteTodo(id) {
                this.todos = this.todos.filter( todo => todo.id !== id )
            },
            // 全选or取消全选 
            checkAllTodo(done){
                this.todos.forEach((todo)=>{
                    todo.done = done;
                });
            },
            // 清除所有已经完成的todo
            clearAllTodo(){
                this.todos = this.todos.filter((todo)=>{
                    return !todo.done;
                })
            }
        },
        // 数据发生改变就放到本地存储中，注意深度侦听，以及JSON转化为字符串
        watch: {
            todos: {
                deep:true,
                handler(value) {
                    localStorage.setItem('todos', JSON.stringify(value));
                }
            }
        }
    }
</script>

<style>
    body {
        background: #fff;
    }
    .btn {
        display: inline-block;
        padding: 4px 12px;
        margin-bottom: 0;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        border-radius: 4px;
    }
    .btn-danger {
        color: #fff;
        background-color: #da4f49;
        border: 1px solid #bd362f;
    }
    .btn-danger:hover {
        color: #fff;
        background-color: #bd362f;
    }
    .btn:focus {
        outline: none;
    } 
    .todo-container {
        width: 600px;
        margin: 0 auto;
    }
    .todo-container .todo-wrap {
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
</style>

3.9. 组件的自定义事件

一种组件间通信的方式，适用于：子组件 ===> 父组件
使用场景：子组件想给父组件传数据，那么就要在父组件中给子组件绑定自定义事件（事件的回调在A中）
绑定自定义事件
1. 第一种方式，在父组件中<Demo @事件名=“方法”/>或<Demo v-on:事件名=“方法”/>
2. 第二种方式，在父组件中this. $re f s . d e m o .$ on(‘事件名’,方法)
```
<Demo ref="demo"/>
......
mounted(){
    this.$refs.xxx.$on('atguigu',this.test);
}
```
3. 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法
触发自定义事件this.$emit(‘事件名’,数据)
解绑自定义事件this.$off(‘事件名’)
组件上也可以绑定原生DOM事件，需要使用native修饰符 @click.native="show"上面绑定自定义事件，即使绑定的是原生事件也会被认为是自定义的，需要加native，加了后就将此事件给组件的根元素
注意：通过this. $re f s . xxx .$ on(‘事件名’,回调函数)绑定自定义事件时，回调函数要么配置在methods中，要么用箭头函数，否则 this 指向会出问题

src/App.vue

<template> 
    <div class="app">
        <h1>{{ msg }}，学生姓名是:{{ studentName }}</h1>

        <!-- 通过父组件给子组件传递函数类型的props实现子给父传递数据 -->
        <School :getSchoolName="getSchoolName"/>

        <!-- 通过父组件给子组件绑定一个自定义事件实现子给父传递数据（第一种写法，使用@或v-on） -->
        <!-- <Student @atguigu="getStudentName" @demo="m1"/> -->

        <!-- 通过父组件给子组件绑定一个自定义事件实现子给父传递数据（第二种写法，使用ref） -->
        <Student ref="student" @click.native="show"/> <!-- 🔴native -->
    </div> 
</template> 

<script> 
    // 引入组件
    import Student from './components/Student.vue';
    import School from './components/School.vue';

    export default { 
        name:'App', 
        components:{ 
            Student,
            School
        },
        data() {
            return {
                msg:'你好啊！',
                studentName:''
            }
        },
        methods: {
            getSchoolName(name) {
                console.log('App收到了学校名：', name);
            },
            getStudentName(name,...params) {
                console.log('App收到了学生名：', name, params);
                this.studentName = name;
            },
            m1() { 
                console.log('demo事件被触发了！') 
            },
            show() { 
                alert(123);
            }
        },
        mounted() {
            this.$refs.student.$on('atguigu', this.getStudentName);
            // 绑定自定义事件 // this.$refs.student.$once('atguigu',this.getStudentName) // 绑定自定义事件（一次性）
        }
    }
</script>

<style scoped>
    .app{
        background-color: gray;
        padding: 5px;
    } 
</style>

src/components/Student.vue

<template>
    <div class="student">
        <h2>学生姓名：{{ name }}</h2>
        <h2>学生性别：{{ sex }}</h2>
        <h2>当前求和为：{{number}}</h2>
        <button @click="add">点我number++</button>
        <button @click="sendStudentlName">把学生名给App</button>
        <button @click="unbind">解绑atguigu事件</button>
        <button @click="death">销毁当前Student组件的实例(vc)</button>
    </div>
</template>

<script>
    export default {
        name:'Student',
        data() {
            return {
                name: "liqb",
                sex: '男',
                number:0
            }
        },
        methods: {
            add() {
                console.log('add回调被调用了');
                this.number++;
            },
            sendStudentlName() {
                // 触发Student组件实例身上的atguigu事件
                this.$emit('atguigu', this.name, 666, 888, 900);
                // this.$emit('demo');
                // this.$emit('click');
            },
            unbind() {
                // 解绑
                this.$off('atguigu') // 解绑一个自定义事件
                // this.$off(['atguigu','demo']) // 解绑多个自定义事件
                // this.$off() // 解绑所有的自定义事件
            },
            death() {
                // 销毁了当前Student组件的实例，销毁后所有Student实例的自定义事件全都不奏效
                this.$destroy();
            }
        }
    }
</script>

<style lang="less" scoped>
    .student{background-color: pink;padding: 5px;margin-top: 30px;}
</style>

src/components/School.vue

<template>
    <div class="school">
        <h2 >学校地址：{{address}}</h2>
        <h2>学校名称：{{name}}</h2>
        <button @click="sendSchoolName">把学校名给App</button>
    </div>
</template>

<script>
    export default {
        name:'School',
        props: ['getSchoolName'],
        data() {
            return {
                name: "莆田学院",
                address: '福建莆田'
            }
        },
        methods: {
            sendSchoolName() {
                this.getSchoolName(this.name);
            }
        }
    }
</script>

<style scoped> 
    .school{ 
        background-color: skyblue; 
    } 
</style>

使用自定义事件优化Todo-List

src/App.vue

<template>
    <div id="root"> 
        <div class="todo-container"> 
            <div class="todo-wrap">
                <MyHeader @addTodo="addTodo"/>
                <MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/>
                <MyFooter :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/>
            </div>
        </div>
    </div>
</template> 

<script> 
    // 引入组件
    import MyFooter from './components/MyFooter';
    import MyHeader from './components/MyHeader';
    import MyList from './components/MyList';

    export default { 
        name:'App', 
        components:{
            MyFooter,
            MyHeader,
            MyList
        },
        data() {
            return {
                // 从本地存储中获得数据，null就创建空数组[]
                todos: JSON.parse(localStorage.getItem('todos')) || []
            }
        },
        methods: {
            // 添加一个todo
            addTodo(todoObj) {
                this.todos.unshift(todoObj);
            },
            // 勾选or取消勾选一个todo
            checkTodo(id) {
                this.todos.forEach((todo)=>{
                    if(todo.id === id) todo.done = !todo.done;
                });
            },
            // 删除一个todo
            deleteTodo(id) {
                this.todos = this.todos.filter( todo => todo.id !== id )
            },
            // 全选or取消全选 
            checkAllTodo(done){
                this.todos.forEach((todo)=>{
                    todo.done = done;
                });
            },
            // 清除所有已经完成的todo
            clearAllTodo(){
                this.todos = this.todos.filter((todo)=>{
                    return !todo.done;
                })
            }
        },
        // 数据发生改变就放到本地存储中，注意深度侦听，以及JSON转化为字符串
        watch: {
            todos: {
                deep:true,
                handler(value) {
                    localStorage.setItem('todos', JSON.stringify(value));
                }
            }
        }
    }
</script>

<style>
    body {
        background: #fff;
    }
    .btn {
        display: inline-block;
        padding: 4px 12px;
        margin-bottom: 0;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        border-radius: 4px;
    }
    .btn-danger {
        color: #fff;
        background-color: #da4f49;
        border: 1px solid #bd362f;
    }
    .btn-danger:hover {
        color: #fff;
        background-color: #bd362f;
    }
    .btn:focus {
        outline: none;
    } 
    .todo-container {
        width: 600px;
        margin: 0 auto;
    }
    .todo-container .todo-wrap {
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
</style>

src/components/MyHeader.vue

<template>
    <div class="todo-header">
        <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="add"/> 
    </div>
</template>

<script>
    import {nanoid} from 'nanoid';
    
    export default {
        name: "Header",
        data(){
            return {
                title:'' // 收集用户输入的title
            }
        },
        methods: {
            add(){
                // 校验数据
                if(!this.title.trim()) return alert('输入不能为空')
                // 将用户的输入包装成一个todo对象
                const todoObj = { 
                    id: nanoid(), 
                    title:this.title, 
                    done:false 
                };
                // 通知App组件去添加一个todo对象
                this.$emit('addTodo', todoObj);
                // 清空输入
                this.title = '';
            }
        }
    }
</script>

<style scoped>
    .todo-header input {
        width: 560px;
        height: 28px;
        font-size: 14px;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 4px 7px;
    }
    .todo-header input:focus {
        outline: none;
        border-color: rgba(82, 168, 236, 0.8);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
    }
</style>

src/components/MyFooter文章来源地址https://www.toymoban.com/news/detail-466320.html

<template>
    <div class="todo-footer" v-show="total">
        <label>
            <input type="checkbox" v-model="isAll"/>
        </label>
        <span>
            <span>已完成{{doneTotal}}</span> / 全部{{total}}
        </span>
        <button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
    </div>
</template>

<script>
    export default {
        name: "Footer",
        props: ['todos'],
        computed: {
            // 总数
            total() {
              return this.todos.length;  
            },
            // 已完成数
            doneTotal() {
                // 此处使用reduce方法做条件统计
                return this.todos.reduce((pre, todo) => pre + (todo.done ? 1 : 0), 0);
            },
            // 控制全选框
            isAll:{
                // 全选框是否勾选
                get(){
                    return this.doneTotal === this.total && this.total > 0;
                },
                // isAll被修改时set被调用
                set(value){
                    this.$emit('checkAllTodo', value);
                }
            }
        },
        methods: {
            clearAll() {
                this.$emit('clearAllTodo');
            }
        }
    }
</script>

<style scoped>
    .todo-footer {
        height: 40px;
        line-height: 40px;
        padding-left: 6px;
        margin-top: 5px;
    }
    .todo-footer label {
        display: inline-block;
        margin-right: 20px;cursor: pointer;
    }
    .todo-footer label input {
        position: relative;
        top: -1px;
        vertical-align: middle; 
        margin-right: 5px;
    }
    .todo-footer button {
        float: right;
        margin-top: 5px;
    }
</style>