vueuse中的createGlobalState的使用

createGlobalState以及useMouse的简单使用

createGlobalState：将状态保存全局作用域中，以便跨Vue实例复用。

useMouse：获取鼠标在页面的位置。

• 使用

1. 创建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)
)

2. 在所需的组件中引入(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展示：