使用 Pinia 的五个技巧

news2024/9/28 20:43:04

在这篇文章中，想与大家分享使用 Pinia 的五大技巧。

以下是简要总结：

不要创建无用的 getter
在 Option Stores 中使用组合式函数（composables）
对于复杂的组合式函数，使用 Setup Stores
使用 Setup Stores 注入全局变量，如路由器（Router）
如何创建私有状态

1、不要创建无用的 getter

你并不需要为所有事情使用 getter。在 Vuex 中有一个普遍的误解，认为你应该总是通过 getter 访问状态。

这是不正确的。

当你需要从状态中计算出某些东西时，getter 是有用的，例如，如果你有一个待办事项列表，想知道有多少已完成，你可以为此创建一个 getter。

在生产代码中经常看到过这样的代码：

export default Vuex.Store({
  state: () => ({ counter: 0 }),
  getters: {
    // 完全无用的 getter
    getCount: state => state.counter,
  },
})

这在 Vuex 中只是不必要的样板代码，在 Pinia 中也是如此。你可以直接访问状态：

const counterStore = useCounterStore()
counterStore.counter // 0 ✅

PS:大多数时候你不需要 storeToRefs()（或 toRef()）。你可以直接使用 store，Vue 的响应式真的很方便 😄。

2、在 Option Stores 中使用组合式函数

你可以在 option stores 中使用一些组合式函数，特别是那些持有状态且可写的组合式函数。例如，你可以使用 @vueuse/core 的 useLocalStorage() 将一些状态存储在浏览器的本地存储中。

import { useLocalStorage } from '@vueuse/core'
const useAuthStore = defineStore('auth', {
  state: () => ({
    user: useLocalStorage('pinia/user/login', 'alice'),
  }),
})

或者使用 refDebounced() 对 ref 的更改进行防抖处理：

import { refDebounced } from '@vueuse/core'
const useSearchStore = defineStore('search', {
  state: () => ({
    user: {
      text: refDebounced(/* ... */),
    },
  }),
})

3、在 Setup Stores 中使用复杂的组合式函数

在 Setup stores 中，你可以使用任何你想要的组合式函数。你可以连接到 websocket、蓝牙处理或甚至游戏手柄！

import { useWebSocket } from '@vueuse/core'
export const useServerInfoStore = defineStore('server-info', () => {
  const { status, data, send, open, close } = useWebSocket('ws://websocketurl')
  return {
    status,
    data,
    send,
    open,
    close,
  }
})

Pinia 会自动识别哪些是状态、getter 或动作。记住，必须从 setup 函数返回所有状态属性。

在 setup stores 中使用 inject()

你可以在 setup stores 中使用 inject() 来访问应用级别提供的变量，如路由器实例：

import { useRouter } from 'vue-router'
export const useAuthStore('auth', () => {
  const router = useRouter()
  function logout() {
    // 登出用户
    return router.push('/login')
  }
  return {
    logout
  }
})

使用嵌套 Stores 创建私有状态

setup stores 的一个黄金规则是返回每一个状态片段：

export const useAuthStore('auth', () => {
  const user = ref<User | null>(null)
  const token = ref<string | null>(null)
  // 我们必须返回 user 和 token
  return {
    user,
    token,
  }
})

但如果我们想要隐藏一些 store 中的状态怎么办？我们可以创建一个包含私有状态的嵌套 store：

export const usePrivateAuthState('auth-private', () => {
  const token = ref<string | null>(null)
  return {
    token,
  }
})
export const useAuthStore('auth', () => {
  const user = ref<User | null>(null)
  const privateState = usePrivateAuthState()
  privateState.token // 仅在此 store 中可访问
  return {
    user,
  }
})

在 SSR 中使用仅客户端状态

服务器端渲染（SSR）是提高应用性能的绝佳方式。然而，与仅客户端应用相比，它带来了一些额外的困难。例如，你无法访问 window、document 或任何其他特定于浏览器的 API，如本地存储。

在 Option Stores 中，这要求你使用 hydrate 选项告诉 Pinia 某些状态不应在客户端上进行 hydrate：

import { useLocalStorage } from '@vueuse/core'
const useAuthStore = defineStore('auth', {
  state: () => ({
    user: useLocalStorage('pinia/user/login', 'alice'),
  }),
  hydrate(state, initialState) {
    state.user = useLocalStorage('pinia/user/login', 'alice')
  },
})

在 Setup Stores 中，你可以使用 skipHydrate 辅助函数标记某些状态为仅客户端状态：

import { defineStore, skipHydrate } from 'pinia'
const useAuthStore = defineStore('auth', () => {
  const user = skipHydrate(useLocalStorage('pinia/user/login', 'alice'))
  return { user }
})