组合式函数

组合式函数是利用 Vue Composition API 封装和重用state逻辑的函数。无论您是自己编写，还是使用外部库，或者两者兼而有之，你都可以在 pinia store 中充分发挥组合式函数的力量。

Option Stores

当定义一个 option store 时，你可以在state属性中调用组合式函数

export const useAuthStore = defineStore('auth', { state: () => ({
    user: useLocalStorage('pinia/auth/login', 'bob'),
  }),
})

请记住，您只能返回可写状态（例如ref()）。以下是一些您可以使用的组合式函数示例：

• useLocalStorage
• useAsyncState

下面是一些不可在 option store 中使用的组合式函数（但可在 setup store 中使用）：

• useMediaControls：公开函数
• useMemoryInfo：公开只读数据
• useEyeDropper：公开只读数据和函数

Setup Stores

另一方面，在定义setup Store 时，您几乎可以使用任何组合式函数，因为每个属性都可以区分为state、actions或getter：

import { defineStore, skipHydrate } from 'pinia'
import { useMediaControls } from '@vueuse/core'

export const useVideoPlayer = defineStore('video', () => {
  // we won't expose this element directly
  const videoElement = ref()
  const src = ref('/data/video.mp4')
  const { playing, volume, currentTime, togglePictureInPicture } =
    useMediaControls(video, { src })

  function loadVideo(element: HTMLVideoElement, src: string) {
    videoElement.value = element
    src.value = src
  }

  return {
    src,
    playing,
    volume,
    currentTime,

    loadVideo,
    togglePictureInPicture,
  }
})

SSR

在处理服务器端渲染时，您需要注意一些额外的步骤，以便在您的 Store 中使用组合式函数组件。

在 Option Stores 中，您需要定义一个hydrate()函数。当 Store 在客户端（浏览器）上被实例化的过程中，创建 store 时有一个可用的初始状态时，这个函数就会被调用。我们需要定义这个函数的原因是，在这种情况下，state()不会被调用。

import { defineStore, skipHydrate } from 'pinia'
import { useLocalStorage } from '@vueuse/core'

export const useAuthStore = defineStore('auth', { state: () => ({
    user: useLocalStorage('pinia/auth/login', 'bob'),
  }), hydrate(state, initialState) {
    // 在这种情况下，我们可以完全忽略初始状态
    // 因为我们想从浏览器中读取数值
    state.user = useLocalStorage('pinia/auth/login', 'bob')
  },
})

在 Setup Store 中，对于任何不应该从初始状态中接收的state属性你都需要使用一个名为skipHydrate()的辅助函数。与 Option Stores 不同，Setup Store 不能直接跳过调用state()，所以我们用skipHydrate()标记那些不能被激活的属性。请注意，这只适用于可写的响应式属性：

import { defineStore, skipHydrate } from 'pinia'
import { useEyeDropper, useLocalStorage } from '@vueuse/core'

export const useColorStore = defineStore('colors', () => {
  const { isSupported, open, sRGBHex } = useEyeDropper()
  const lastColor = useLocalStorage('lastColor', sRGBHex)
  // ...
  return {
    lastColor: skipHydrate(pickedColor), // Ref
    open, // Function
    isSupported, // boolean (非响应式)
  }
})

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com