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>