Share five practical tips for using Pinia by vue

1. Don't create useless getters

You don't need to use it for everythinggetter. There is a common misconception in Vuex that you should always passgetterAccess status.

This is incorrect。

When you need to calculate something from the state,getterIt is useful, for example, if you have a to-do list and want to know how many are done, you can create one for thisgetter。

I often see code like this in production code:

export default ({
  state: () => ({ counter: 0 }),
  getters: {
    // totally useless getter    getCount: state => ,
  },
})

This is just unnecessary boilerplate code in Vuex,PiniaThe same is true for the middle. You can access the status directly:

const counterStore = useCounterStore()
 // 0 ✅

PS: Most of the time you don't need itstoreToRefs()(ortoRef()). You can use it directlystore, Vue's responsiveness is really convenient.

2. Use combination functions in Option Stores

You can use some combinatorial functions in option stores, especially those that hold state and are writable. For example, you can use@vueuse/coreofuseLocalStorage()Store some state in the browser's local storage.

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

Or userefDebounced()rightrefChanges to prevent the image:

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

3. Use complex combinatorial functions in Setup Stores

In Setup stores, you can use any combo function you want. You can connect to websocket, Bluetooth processing or even gamepad!

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 will automatically identify which states, getters, or actions are.remember, mustsetupThe function returns all state properties.

Use inject() in setup stores

You can use it in setup storesinject()To access variables provided at the application level, such as router instance:

import { useRouter } from 'vue-router'
export const useAuthStore('auth', () => {
  const router = useRouter()
  function logout() {
    // Log out of the user    return ('/login')
  }
  return {
    logout
  }
})

Create private state using nested stores

One of the golden rules for setup stores is to return each state fragment:

export const useAuthStore('auth', () => {
  const user = ref<User | null>(null)
  const token = ref<string | null>(null)
  // We must return user and token  return {
    user,
    token,
  }
})

But if we want to hide somestoreWhat to do if the status is in? We can create a nested store with private state:

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()
   // Accessible in this store only  return {
    user,
  }
})

Use client-only state in SSR

Server-side rendering (SSR) is an excellent way to improve application performance. However, it presents some additional difficulties compared to client-only applications. For example, you cannot accesswindow、documentor any other browser-specific API, such as local storage.

In Option Stores, this requires you to usehydrateOptions tell Pinia that certain states should not be performed on the clienthydrate：

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

In Setup Stores, you can useskipHydrateHelper functions mark certain states as client-only states:

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

This is the end of this article about five practical tips for using Pinia in vue. This is the end of this article. For more related Pinia tips, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!