vue方法封装,vue 组件封装应该遵循 什么样的设计模式
存储作为Web存储API的接口，提供了访问特定域名下的会话存储或本地存储的功能，比如可以添加、修改或删除存储的数据项。本文主要介绍如何使用Vue的思想打包存储。有需要的可以参考一下。
目录
setgetdeleteproperty preventextensions as的背景、功能、目的、想法来源、实现摘要
背景
localStorage和sessionStorage这两个API是我们前端日常开发中存储的利器，我们经常用它们来存储一些数据。当我们每天操作它们时，本地存储和会话存储的使用通常是直接的：
localStorage.setItem(xxx，XXX)；
sessionStorage.setItem(xxx，XXX)；
local storage . getitem(XXX)；
session storage . getitem(XXX)；
或者有些同学会简单的这样包装：
const getItem=(key)={
const serialized value=window . local storage . getitem(key)as any；
返回JSON . parse(serialized value)；
};
const setItem=(key，value)={
if (window window.localStorage) {
window . local storage . setitem(key，JSON . stringify(value))；
}
};
不过，虽然用这种方式问题不大，但总感觉代码不够优雅。就在最近，一些底层的基本库被封装了，包括对两兄弟的封装。找点更有趣的。边肖也有一些新的经验和想法与大家分享。
功能
设置localStorage和sessionStorage
本地存储，会话存储获取
从localStorage和sessionStorage中删除一个项目。
LocalStorage和sessionStorage清除所有存储。
目的
封装一个localStorage和sessionStorage API来添加、删除、更改和检查存储。
想法来源
如果你用过Vue2.0，那么你一定知道Object.defineProperty方法。这个API是Vue response的核心，用来观察数据的变化，但是有一些弊端：
在对象数据中添加新的一对键/值或删除现有的一对键/值时，无法观察到。因此，当我们向对象数据添加或删除值时，我们不能通知依赖关系并驱动视图相应地更新。
对于数组变化检测，Vue2.0是通过拦截器实现的，也就是说只要数组原型上的方法操作数组就可以检测到。但是用数组下标操作数据时，需要手动操作。
这些问题在Vue 3.0中已经解决了，解决方案是ES6中的方法代理。
代理是用来修改一些操作的默认行为的，相当于在语言层面做出改变，所以属于一种“元编程”，也就是对编程语言进行编程。
代理可以理解为在目标对象前面设置一层“拦截”。所有对对象的外部访问都必须通过这一层来拦截，因此它提供了一种过滤和重写外部访问的机制。Proxy这个词的原意是代理，这里用来表示它“代理”某些操作，可以翻译为“代理”。
Proxy是一个天然的拦截器和代理，所以我们也可以用Proxy来代理localStorage和sessionStorage的操作。话不多说，直接去码。
实现
var proxyStorage={
/**
*返回存储代理
* @返回代理
* @示例
* proxy storage . getstorageproxy(local storage， _ )
*/
getStorageProxy: (storage，prefix)={
如果(！存储)
返回false
const getKey=(prop)=`${prefix}。$ { String(prop)} `；
返回新代理(新对象()，{
/**
*设置存储
* @返回布尔值
* @示例
* const storage proxy=proxy storage . getstorageproxy(local storage， _ )；
* storage proxy . a=1；
*/
设置(目标，属性，值){
target[prop]=值；
storage.setItem(getKey(prop)，JSON . stringify(value))；
返回true
},
/**
*获取存储空间
* @返回布尔值
* @示例
* const storage proxy=proxy storage . getstorageproxy(local storage， _ )；
* console . log(storage proxy . a)；
*/
get(_，prop) {
return JSON . parse(storage . getitem(getKey(prop)) )；
},
/**
*删除存储
* @返回布尔值
* @示例
* const storage proxy=proxy storage . getstorageproxy(local storage， _ )；
*删除storageProxy.a
*/
deleteProperty(_，prop) {
storage . remove item(getKey(prop))；
返回true
},
/**
*空存储
* @返回布尔值
* @示例
* const storage proxy=proxy storage . getstorageproxy(local storage， _ )；
* object . prevent extensions(storage proxy)；
*/
preventExtensions(目标){
object . prevent extensions(target)；
storage . clear()；
返回true
},
/**
*查询存储
* @返回布尔值
* @示例
* const storage proxy=proxy storage . getstorageproxy(local storage， _ )；
* storage proxy中的“a ”;
*/
有(目标，道具){
尝试{
回归！storage . key(prop)；
} catch(错误){
返回false
}
}
});
},
};
var proxyStorageTest=proxy storage . getstorageproxy(local storage， _ )；
使用Proxy返回localStorage和sessionStorage的代理对象，该对象劫持set、get、delete、preventExtensions和in等操作。
set
截取对象属性的设置，如storage.foo=v或storage[foo]=v，并返回一个布尔值。给代理对象的属性赋一个值，截取这个赋值，操作对应存储的setItem，这样值就可以直接存储在对应的存储中了。
storage . a=1；
//或者
存储[ a ]=1；
get
拦截对象属性的读取，比如storage.foo和storage[foo]。读取代理对象的属性值，截取这个获取操作，获取对应的key，操作对应存储的getItem，从对应存储中获取对应的值。
console . log(storage . a)；//1
deleteProperty
拦截删除存储[propKey]的操作，并返回一个布尔值。这里拦截的是对象的数据删除操作，存储内部操作removeItem item，删除数据。
删除proxyStorageTest.a
preventExtensions
截取object . prevent extensions(storage)并返回一个布尔值。拦截对象的不可扩展操作，内部清空对应的存储，清除所有存储的值。
object . prevent extensions(proxyStorageTest)；
has
拦截proxy中propKey的操作和对象的hasOwnProperty方法，返回一个布尔值。截取对象的查询属性来查询对应的存储中是否存在一个键。
proxyStorageTest中的“a ”;
总结
localStorage和sessionStorage的操作由代理表示，并封装了一个简单的存储API。该代理可用于操作localStorage、sessionStorage、document.cookie和indexedDB。当然，代理的作用不仅限于此。它还有很多其他用途，比如在Vue 3.0中使用代理，或者其他。本文的重点不是封装一个简单的API，而是引导大家学习这种思想。
这就是这篇关于如何用Vue的创意包装储物件的文章。更多关于用Vue的创意包装储物的信息，请搜索我们之前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。