vue使用Pinia的五个实用技巧分享
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 }
})到此这篇关于vue使用Pinia的五个实用技巧分享的文章就介绍到这了,更多相关Pinia技巧内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了在Vue 中使用Typescript的示例代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-09-09
这篇文章主要介绍了vue的面包屑导航组件，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了vue中点击按钮下载文件，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-10-10
这篇文章主要为大家详细介绍了Vue实现简单计算器案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
Webpack是开发Vue.js单页应用程序的重要工具。下面通过四种方式给大家介绍使用Webpack提高Vue.js应用，需要的的朋友参考下吧2017-07-07
在项目开发中，我们经常会遇到表单保存的功能，本文主要介绍了v-for中动态校验el-form表单项的实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧<BR>2022-05-05
这篇文章主要介绍了详解基于vue的移动web app页面缓存解决方案，非常具有实用价值，需要的朋友可以参考下2017-08-08
这篇文章主要为大家详细介绍了Vue2中Element UI表单的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
nextTick 是 Vue 提供的一个重要工具,它的作用主要体现在帮助我们更好地处理异步操作,下面就跟随小编一起来探索一下nextTick的原理与实现吧2024-02-02
这篇文章主要介绍了vue实现可搜索的下拉菜单组件功能，在文中通过实例代码给大家补充介绍了vue组件实践-可搜索下拉框，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-11-11
最新评论