网站建设部署视频,施工员证查询官方网站,注册一个logo需要多少钱,南昌做个网站多少钱在这篇文章中#xff0c;想与大家分享使用 Pinia 的五大技巧。 以下是简要总结#xff1a;
不要创建无用的 getter在 Option Stores 中使用组合式函数#xff08;composables#xff09;对于复杂的组合式函数#xff0c;使用 Setup Stores使用 Setup Stores 注入全局变量… 在这篇文章中想与大家分享使用 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: {// 完全无用的 gettergetCount: state state.counter,},
})
这在 Vuex 中只是不必要的样板代码在 Pinia 中也是如此。你可以直接访问状态
const counterStore useCounterStore()
counterStore.counter // 0 ✅
PS:大多数时候你不需要 storeToRefs()或 toRef()。你可以直接使用 storeVue 的响应式真的很方便 。
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 refUser | null(null)const token refstring | null(null)// 我们必须返回 user 和 tokenreturn {user,token,}
})
但如果我们想要隐藏一些 store 中的状态怎么办我们可以创建一个包含私有状态的嵌套 store
export const usePrivateAuthState(auth-private, () {const token refstring | null(null)return {token,}
})
export const useAuthStore(auth, () {const user refUser | 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 }
})
总结
当然还有许多其他的技巧可以分享但这些是我认为比较有用的。此外大多数人对它们并不了解。你有没有发现任何有用的 Pinia 技巧或窍门
