我们经常需要使用 LocalStorage
API,一个好用的可组合函数封装将帮助我们更好地使用它,让我们开始吧 👇:
TypeScript
<script setup lang='ts'>
import { ref, watch } from "vue"
/**
* Implement the composable function
* Make sure the function works correctly
*/
function useLocalStorage(key: string, initialValue: any) {
const value = ref(initialValue)
watch(value,(val)=>{
localStorage.setItem(key,val)
},{
immediate:true
})
return value
}
const counter = useLocalStorage("counter", 0)
// We can get localStorage by triggering the getter:
console.log(counter.value)
// And we can also set localStorage by triggering the setter:
const update = () => counter.value++
</script>
<template>
<p>Counter: {{ counter }}</p>
<button @click="update">
Update
</button>
</template>
其中的watch可以修改为以下方式:
TypeScript
watchEffect(() => {
localStorage.setItem(key, value.value)
})
// watchEffect自动添加了immediate:true
watchEffect:立即运行一个函数,同时响应式地追踪其依赖,并在依赖更改时重新执行。
watchEffect的特点可以查看watchEffect()和effectScope()-CSDN博客