vue3.x学习笔记之项目实战 -- 使用useStorage

• VueUse 中 useStorage()

• 值的保存、获取、删除
• useStorage()自定义序列化

• VueUse

• 主要思想
• VueUse文档：
• 特点
• 快速开始

• 安装
• 使用方法

• 最优的使用方法

• 解构
• 清除副作用’

• 接收响应式的参数（Passing Ref as Argument）

这篇文章主要给大家介绍了关于如何在Vue3中使用useStorage轻松实现localStorage功能,

文中通过实例代码介绍的非常详细,对大家的学习或工作具有一定的参考学习价值,需要的朋友可以参考下

VueUse 中 useStorage()

官网地址：https://www.vueusejs.com/core/useStorage/

useStorage()将要用于引用的键名作为第一个参数传递，将要保存的值作为第二个参数传递

值的保存、获取、删除

localStorage设置setItem()来保存值，用getItem()来获取值，用removeItem来删除值如下：

<script setup >
   import {ref} from "vue";
   const counter = ref('消息')
   //保存值
   localStorage.setItem('counter',counter.value)
   //获取值
   const data = localStorage.getItem('counter')
   console.log('data',data)
   //删除值
   localStorage.removeItem('counter')
</script>

而useStorage()只需要一个就可以进行值的保存和获取，如下，用法：

const storedValue = useStorage('key', value)

例子：

const msg = ref('你好')
//保存值
useStorage('msg',msg.value)
//获取值
const msgData = useStorage('msg')
console.log('msgData',msgData.value)
//删除
const clear = () => {
  msg.value = null
}

useStorage()自定义序列化

默认情况下，useStorage将根据提供的默认值的数据类型智能地使用相应的序列化程序。

例如，JSON.stringify/JSON.parse将用于对象，Number.toString/parseFloat用于数字等。

如下：

import { useStorage } from '@vueuse/core'
useStorage(
  'key',
  {},
  undefined,
  {
    serializer: {
      read: (v: any) => v ? JSON.parse(v) : null,
      write: (v: any) => JSON.stringify(v),
    },
  },
)

以上代码，我们设置对象的名称为key，初始值为空对象{},如果存储中没有key的值，则返回null。在写入时，将对象序列化为JSON字符串

VueUse

VueUse是基于Vue3的Composition API的实用函数的集合，大约200 多个。用于与浏览器、状态、网络、动画、时间等各种 API 进行交互。

主要思想

组合API促进了组件之间共享代码的更好范例。明确的依赖关系和设计的命名空间使我们甚至可以在不同的项目之间共享代码。

VueUse文档：

• https://www.vueusejs.com/
• https://vueuse.org/

特点

• VueUse是由Anthony Fu等大佬写的基于Vue的自定义钩子集合。
• 类似于基于React的 ahooks
• 功能丰富：200+功能
• 无缝迁移：适用于Vue 3和Vue2.7版本之后
• 支持tree shaking：只引入自己需要的那部分，打包会更小
• 还有其他的亮点，可以去官网查看

快速开始

VueUse是一个基于Composition API的实用函数集合。所以需要熟悉 Composition API 的基本概念。

安装

下载包的方式

npm i @vueuse/core

使用方法

import { useLocalStorage, useMouse, usePreferredDark } from '@vueuse/core'

export default {
  setup() {
    // tracks mouse position
    const { x, y } = useMouse()

    // is user prefers dark theme
    const isDark = usePreferredDark()

    // persist state in localStorage
    const store = useLocalStorage(
      'my-storage',
      {
        name: 'Apple',
        color: 'red',
      },
    )

    return { x, y, isDark, store }
  },
}

最优的使用方法

解构

VueUse中的大多数函数都返回一个refs对象，你可以使用ES6的对象解构语法来获取你需要的：

import { useMouse } from '@vueuse/core'

// "x" and "y" are refs
const { x, y } = useMouse()

console.log(x.value)

const mouse = useMouse()

console.log(mouse.x.value)

如果你不喜欢.value的使用方式，你可以使用reactive()来包裹返回的refs对象：

import { reactive } from 'vue'
import { useMouse } from '@vueuse/core'

const mouse = reactive(useMouse())

// "x"和"y"将自动展开，不需要 `.value`
// "x" and "y" will be auto unwrapped, no `.value` needed
console.log(mouse.x)

清除副作用’

类似于Vue的watch 和computed ，当组件卸载时将被处理掉，VueUse的功能也会自动清除副作用。

例如：useEventListener，当组件销毁时候，会自动调用removeEventListener 来进行处理，无需手动处理。

// 将会自动清除
// will cleanup automatically
useEventListener('mousemove', () => {})

所有的VueUse函数都遵循这个约定。

为了手动处理副作用，一些函数返回一个stop方法，就像 watch 函数一样。例如:

const stop = useEventListener('mousemove', () => {})

// ...

// 手动注销事件侦听器
// unregister the event listener manually
stop()

不是所有函数都会返回这个方法，更通用的解决方案是使用Vue的effectScope API

import { effectScope } from 'vue'

const scope = effectScope()

scope.run(() => {
  // ...

  useEventListener('mousemove', () => {})
  onClickOutside(el, () => {})
  watch(source, () => {})
})

// all composables called inside `scope.run` will be disposed
scope.stop()