vue-03-4:vue封装方法到工具类
参考博客:咸鱼最牛逼
地址: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>