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

                 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>