August 26, 2023 vue pinia

Pinia Persisted State

State pada pinia store secara default akan disimpan di runtime javascript browser, sehingga ketika halaman dimuat ulang, state akan direset ke nilai awal.

Namun ada beberapa keadaan yang membutuhkan state pada pinia untuk dipermanenkan walaupun halaman dimuat ulang.

Contohnya AuthStore yang memiliki state token berisi access token yang digunakan untuk merequest data ke server.

State token didapat setelah user melakukan login, namun ketika halaman dimuat ulang otomatis token akan hilang karena state direset ke nilai awal.

Untuk mengatasinya anda bisa menggunakan plugin Pinia Persisted State.

Dengan plugin tersebut, state pada store akan otomatis disimpan di localstorage, sehingga ketika halaman dimuat ulang state akan tetap ada.

Langkah pertama yang harus dilakukan adalah menginstalnya.

npm i pinia-plugin-persistedstate

Setelah itu, impor dan gunakan pada pinia.

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

Untuk menggunakannya, pilih store yang akan dipermanenkan statenya, kemudian tambahkan opsi persist: true pada pendifinisian store tersebut.

import { ref } from 'vue'
import { defineStore } from 'pinia'

export const useStore = defineStore('auth', () => {
    const token = ref(null)
    const isLoggedIn = ref(false)
}, { persist: true })

Baca lebih lanjut: