createGlobalState以及useMouse的简单使用
createGlobalState:将状态保存全局作用域中,以便跨Vue实例复用。
useMouse:获取鼠标在页面的位置。
- 使用
- 创建store.ts
// store.js
import { computed, ref } from 'vue'
import { createGlobalState, useLocalStorage } from '@vueuse/core'
// mark:全局状态管理
export const useGlobalState = createGlobalState(
() => {
// 初始数据
const count = ref<number>(11)
// 数据的处理
const doubleCount = computed(() => count.value * 2)
// 数据的操作
function increment() {
count.value++
}
return { count, doubleCount, increment }
}
)
// mark:状态存储(同理还用useStorage,useSessionStorage)
export const useStorageState = createGlobalState(
() => useLocalStorage<number>('num', 0)
)
- 在所需的组件中引入(home.vue)
<script lang='ts' setup>
import { useGlobalState, useStorageState } from '@/store/store'
const globalState = useGlobalState()
const storageState = useStorageState()
console.log(storageState.value);
const { x, y } = useMouse()
const addStorage = () => {
storageState.value++
}
</script>
<template>
<div>鼠标位置=>X:{{ x }},Y:{{ y }}</div>
<div>测试useGlobalState:{{ globalState }}</div>
<button @click="globalState.increment">count+1</button>
<div>测试useStorageState:{{ storageState }}</div>
<button @click="addStorage">changeStorage</button>
</template>
<style lang="scss" scoped></style>
效果如图:
localStroage展示: