vuex persistedstate
v4.1.0
Bertahan dan rehidrasi keadaan vuex Anda di antara halaman ulang halaman.
Tidak dirawat lagi! Karena saya tidak menggunakan Vue dalam pekerjaan sehari -hari saya, menjadi sangat sulit untuk tetap up to date dengan perubahan apa pun dengan hal -hal seperti Vuex, Nuxt.js dan alat lain yang digunakan oleh masyarakat. Itu sebabnya saya memutuskan untuk berhenti menghabiskan waktu luang saya ke repositori ini. Jangan ragu untuk menjangkau jika Anda ingin mengambil alih kepemilikan paket di NPM. Terima kasih atas kontribusi yang Anda buat untuk proyek ini.
npm install --save vuex-persistedstateBuild UMD juga tersedia di UNPKG:
< script src =" https://unpkg.com/vuex-persistedstate/dist/vuex-persistedstate.umd.js " > </ script > Anda dapat menemukan perpustakaan di window.createPersistedState .
import { createStore } from "vuex" ;
import createPersistedState from "vuex-persistedstate" ;
const store = createStore ( {
// ...
plugins : [ createPersistedState ( ) ] ,
} ) ;Untuk digunakan dengan Vuex 3 dan Vue 2, silakan lihat cabang 3.xx.
Lihat contoh dasar di CodeSandBox.
Atau dikonfigurasi untuk digunakan dengan JS-Cookie.
Atau dikonfigurasi untuk digunakan dengan aman-ls
Instance plugin baru dapat dibuat di file terpisah, tetapi harus diimpor dan ditambahkan ke objek Plugin di file VUEX utama.
/* module.js */
export const dataStore = {
state : {
data : [ ]
}
}
/* store.js */
import { dataStore } from './module'
const dataState = createPersistedState ( {
paths : [ 'data' ]
} )
export new Vuex . Store ( {
modules : {
dataStore
} ,
plugins : [ dataState ]
} )Dimungkinkan untuk menggunakan Vuex-PersistedState dengan Nuxt.js. Itu harus dimasukkan sebagai plugin Nuxtjs:
// nuxt.config.js
...
/*
* Naming your plugin 'xxx.client.js' will make it execute only on the client-side.
* https://nuxtjs.org/guide/plugins/#name-conventional-plugin
*/
plugins : [ { src : '~/plugins/persistedState.client.js' } ]
. . . // ~/plugins/persistedState.client.js
import createPersistedState from 'vuex-persistedstate'
export default ( { store } ) => {
createPersistedState ( {
key : 'yourkey' ,
paths : [ ... ]
...
} ) ( store )
} Tambahkan cookie dan js-cookie :
npm install --save cookie js-cookie atau yarn add cookie js-cookie
// nuxt.config.js
...
plugins : [ { src : '~/plugins/persistedState.js' } ]
. . . // ~/plugins/persistedState.js
import createPersistedState from 'vuex-persistedstate' ;
import * as Cookies from 'js-cookie' ;
import cookie from 'cookie' ;
export default ( { store , req } ) => {
createPersistedState ( {
paths : [ ... ] ,
storage : {
getItem : ( key ) => {
// See https://nuxtjs.org/guide/plugins/#using-process-flags
if ( process . server ) {
const parsedCookies = cookie . parse ( req . headers . cookie ) ;
return parsedCookies [ key ] ;
} else {
return Cookies . get ( key ) ;
}
} ,
// Please see https://github.com/js-cookie/js-cookie#json, on how to handle JSON.
setItem : ( key , value ) =>
Cookies . set ( key , value , { expires : 365 , secure : false } ) ,
removeItem : key => Cookies . remove ( key )
}
} ) ( store ) ;
} ; createPersistedState([options])Membuat instance baru plugin dengan opsi yang diberikan. Opsi berikut dapat disediakan untuk mengkonfigurasi plugin untuk kebutuhan spesifik Anda:
key <String> : Kunci untuk menyimpan keadaan yang bertahan di bawah. Default ke vuex .
paths <Array> : Array dari setiap jalur untuk sebagian bertahan negara. Jika tidak ada jalur yang diberikan, keadaan lengkap tetap ada. Jika array kosong diberikan, tidak ada negara yang tetap ada. Jalur harus ditentukan menggunakan notasi titik. Jika menggunakan modul, sertakan nama modul. Misalnya: "auth.user" default untuk undefined .
reducer <Function> : Fungsi yang akan dipanggil untuk mengurangi keadaan bertahan berdasarkan jalur yang diberikan. Default untuk memasukkan nilai.
subscriber <Function> : Fungsi yang dipanggil untuk mengatur langganan mutasi. Default ke store => handler => store.subscribe(handler) .
storage <Object> : Alih -alih (atau dalam kombinasi dengan) getState dan setState . Default ke LocalStorage.
getState <Function> : Suatu fungsi yang akan dipanggil untuk merehidrasi keadaan yang sebelumnya bertahan. Default menggunakan storage .
setState <Function> : Fungsi yang akan dipanggil untuk bertahan dari keadaan yang diberikan. Default menggunakan storage .
filter <Function> : Fungsi yang akan dipanggil untuk memfilter mutasi apa pun yang akan memicu setState pada penyimpanan pada akhirnya. Default ke () => true .
overwrite <Boolean> : Saat rehidrasi, apakah akan menimpa keadaan yang ada dengan output dari getState secara langsung, alih -alih menggabungkan kedua objek dengan deepmerge . Default ke false .
arrayMerger <Function> : Fungsi untuk menggabungkan array saat rehidrasi. Default ke function (store, saved) { return saved } (status disimpan menggantikan status yang disediakan).
rehydrated <Function> : Fungsi yang akan dipanggil ketika rehidrasi selesai. Berguna saat Anda menggunakan nuxt.js, yang rehidrasi keadaan yang ada terjadi secara tidak sinkron. Default ke store => {}
fetchBeforeUse <Boolean> : Boolean yang menunjukkan apakah keadaan harus diambil dari penyimpanan sebelum plugin digunakan. Default ke false .
assertStorage <Function> : Fungsi yang dapat diterbitkan untuk memastikan penyimpanan tersedia, dipecat pada inisialisasi plugin. Default One sedang melakukan operasi write-delete pada instance penyimpanan yang diberikan. Catatan, perilaku default bisa melempar kesalahan (seperti DOMException: QuotaExceededError ).
Jika tidak ideal untuk memiliki status toko Vuex di dalam LocalStorage. Seseorang dapat dengan mudah menerapkan fungsionalitas untuk menggunakan cookie untuk itu (atau yang lain dapat Anda pikirkan);
import { Store } from "vuex" ;
import createPersistedState from "vuex-persistedstate" ;
import * as Cookies from "js-cookie" ;
const store = new Store ( {
// ...
plugins : [
createPersistedState ( {
storage : {
getItem : ( key ) => Cookies . get ( key ) ,
// Please see https://github.com/js-cookie/js-cookie#json, on how to handle JSON.
setItem : ( key , value ) =>
Cookies . set ( key , value , { expires : 3 , secure : true } ) ,
removeItem : ( key ) => Cookies . remove ( key ) ,
} ,
} ) ,
] ,
} ) ;Faktanya, objek apa pun yang mengikuti protokol penyimpanan (getItem, setItem, removeItem, dll) dapat dilewati:
createPersistedState ( { storage : window . sessionStorage } ) ;Ini sangat berguna ketika Anda menggunakan plugin ini dalam kombinasi dengan rendering sisi server, di mana orang dapat melewati contoh penyimpanan DOM.
Jika Anda perlu menggunakan penyimpanan lokal (atau Anda ingin) tetapi ingin mencegah penyerang untuk dengan mudah memeriksa data yang disimpan, Anda dapat mengaburkannya.
Penting
import { Store } from "vuex" ;
import createPersistedState from "vuex-persistedstate" ;
import SecureLS from "secure-ls" ;
var ls = new SecureLS ( { isCompression : false } ) ;
// https://github.com/softvar/secure-ls
const store = new Store ( {
// ...
plugins : [
createPersistedState ( {
storage : {
getItem : ( key ) => ls . get ( key ) ,
setItem : ( key , value ) => ls . set ( key , value ) ,
removeItem : ( key ) => ls . remove ( key ) ,
} ,
} ) ,
] ,
} ) ; Seperti yang mungkin terlihat pada pandangan pertama, tidak mungkin untuk lulus instance localforage sebagai properti storage . Ini karena fakta bahwa semua getter dan setter harus sinkron dan metode localforage tidak sinkron.
Silakan lihat Changelog untuk informasi lebih lanjut tentang apa yang telah berubah baru -baru ini.
Terima kasih kepada orang -orang yang luar biasa ini (Kunci Emoji):
Robin van der Vleuten ? | Sebastian | Boris Graeff | Cícero Pablo | Gurpreet Atwal | Jakub Koralewski | Jankees Van Woezik |
Jofferson Ramirez Tiquez | Jordan Deprez | Juan Villegas | Jürg Rast | Kartashov Alexey | Leonard Pauli | Nelson Liu |
Nico | Quentin Dreyer | Raphael Saunier | Rodney Rehm | Ryan Wang | Sébastien Chopin | Jeffjing |
MacArthuror | Paul Melero | Guillaume da Silva | Jonathan Santerre | Fábio Santos | Robertgr991 | Jurijskolesnikovs |
David Bond | Freek Van Rijt | Ilyes Hermellin | Peter Siska | Dmitry Filippov | Thomas Meitz | Neeron Bhatta |
Joaoaraujo-hotmart |
Proyek ini mengikuti spesifikasi semua-kontributor. Kontribusi apa pun yang baik!
Lisensi MIT (MIT). Silakan lihat file lisensi untuk informasi lebih lanjut.
