• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • 组合式函数

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

    Option Stores

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

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

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

    下面是一些不可在 option store 中使用的组合式函数(但可在 setup store 中使用):


    Setup Stores

    另一方面,在定义setup Store 时,您几乎可以使用任何组合式函数,因为每个属性都可以区分为stateactionsgetter

    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<HTMLVideoElement>()
      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<string>
        open, // Function
        isSupported, // boolean (非响应式)
      }
    })