vue-03-4：vue封装方法到工具类

vue-03-4：vue封装方法到工具类

CoderYin

参考博客：咸鱼最牛逼

地址：https://blog.csdn.net/panchang199266?utm_source=feed

一、步骤

1、src目录下新建util文件夹

2、新建storage.js文件

3、编写localStorage设置、获取、删除缓存方法

// 封装本地存储的方法
var storage={
    set(key, value) {
        //对象必须序列化才能存入缓存
        localStorage.setItem(key, JSON.stringify(value));
    },
    get(key) {
        //反序列化
        return JSON.parse(localStorage.getItem(key));
    },
    remove(key) {
        localStorage.removeItem(key);
    }
}
export default storage;

4、组件引入storage中方法

<template>
    <div>
        <input type="text" v-model="todo" />
        <button type="button" v-on:click="getStorage">点击</button>
    </div>
</template>

<script>
// 引入封装的方法
import storage from '@/utils/storage.js';
export default {
    data() {
        return {
            todo: '',
        };
    },
    
    methods:{
        getStorage(){
            alert(this.todo);
            console.log(storage.get('userInfo'));
        },
    },
    mounted() {
        storage.set('userInfo',"{name:'yinyuyou',sex:'man'}");
    },
}
</script>
<style>
</style>