vuex persistedstate
v4.1.0
คงอยู่และคืนสถานะ vuex ของคุณระหว่างการโหลดหน้าใหม่
ไม่ได้รับการดูแลอีกต่อไป! เนื่องจากฉันไม่ได้ใช้ Vue ในการทำงานประจำวันของฉันมันก็ยากมากที่จะติดตามการเปลี่ยนแปลงใด ๆ กับสิ่งต่าง ๆ เช่น Vuex, Nuxt.js และเครื่องมืออื่น ๆ ที่ชุมชนใช้ นั่นเป็นเหตุผลที่ฉันตัดสินใจหยุดใช้เวลาว่างกับที่เก็บนี้ อย่าลังเลที่จะเข้าถึงหากคุณต้องการที่จะเป็นเจ้าของแพ็คเกจใน NPM ขอบคุณสำหรับการสนับสนุนใด ๆ ที่คุณทำในโครงการนี้
npm install --save vuex-persistedstateUMD Build ยังมีอยู่ใน UNPKG:
< script src =" https://unpkg.com/vuex-persistedstate/dist/vuex-persistedstate.umd.js " > </ script > คุณสามารถค้นหาไลบรารีได้ที่ window.createPersistedState
import { createStore } from "vuex" ;
import createPersistedState from "vuex-persistedstate" ;
const store = createStore ( {
// ...
plugins : [ createPersistedState ( ) ] ,
} ) ;สำหรับการใช้งานสำหรับ Vuex 3 และ Vue 2 โปรดดูสาขา 3.xx
ตรวจสอบตัวอย่างพื้นฐานเกี่ยวกับ codesandbox
หรือกำหนดค่าให้ใช้กับ JS-Cookie
หรือกำหนดค่าให้ใช้กับ Secure-LS
อินสแตนซ์ปลั๊กอินใหม่สามารถสร้างได้ในไฟล์แยกต่างหาก แต่ต้องนำเข้าและเพิ่มลงในวัตถุปลั๊กอินในไฟล์ Vuex หลัก
/* 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 ]
} )เป็นไปได้ที่จะใช้ vuex-persistedstate กับ nuxt.js. จะต้องรวมเป็นปลั๊กอิน 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 )
} เพิ่ม cookie และ js-cookie :
npm install --save cookie js-cookie หรือ 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])สร้างอินสแตนซ์ใหม่ของปลั๊กอินด้วยตัวเลือกที่กำหนด สามารถให้ตัวเลือกต่อไปนี้เพื่อกำหนดค่าปลั๊กอินสำหรับความต้องการเฉพาะของคุณ:
key <String> : คีย์ในการจัดเก็บสถานะคงที่ภายใต้ ค่าเริ่มต้นเป็น vuex
paths <Array> : อาร์เรย์ของเส้นทางใด ๆ ที่จะคงอยู่บางส่วน หากไม่มีเส้นทางที่ได้รับสถานะที่สมบูรณ์จะคงอยู่ หากได้รับอาร์เรย์เปล่าจะไม่มีสถานะคงอยู่ ต้องระบุเส้นทางโดยใช้สัญลักษณ์จุด หากใช้โมดูลให้รวมชื่อโมดูล เช่น: "Auth.user" เริ่มต้นที่จะ undefined
reducer <Function> : ฟังก์ชั่นที่จะถูกเรียกให้ลดสถานะให้คงอยู่ตามเส้นทางที่กำหนด ค่าเริ่มต้นที่จะรวมค่า
subscriber <Function> : ฟังก์ชั่นที่เรียกว่าการตั้งค่าการสมัครการกลายพันธุ์ ค่าเริ่มต้นใน store => handler => store.subscribe(handler)
storage <Object> : แทนที่จะเป็น (หรือร่วมกับ) getState และ setState ค่าเริ่มต้นเป็น LocalStorage
getState <Function> : ฟังก์ชั่นที่จะเรียกให้กลับมาอีกครั้งสถานะคงที่ก่อนหน้านี้ ค่าเริ่มต้นในการใช้ storage
setState <Function> : ฟังก์ชั่นที่จะถูกเรียกให้คงอยู่ในสถานะที่กำหนด ค่าเริ่มต้นในการใช้ storage
filter <Function> : ฟังก์ชั่นที่จะถูกเรียกให้กรองการกลายพันธุ์ใด ๆ ซึ่งจะทริกเกอร์ setState บนการจัดเก็บในที่สุด ค่าเริ่มต้นเป็น () => true
overwrite <Boolean> : เมื่อ rehydrating ไม่ว่าจะเขียนทับสถานะที่มีอยู่ด้วยผลลัพธ์จาก getState โดยตรงแทนที่จะรวมวัตถุทั้งสองเข้ากับ deepmerge ค่าเริ่มต้นเป็น false
arrayMerger <Function> : ฟังก์ชั่นสำหรับการรวมอาร์เรย์เมื่อสถานะคืนสภาพ ค่าเริ่มต้นเป็น function (store, saved) { return saved } (สถานะที่บันทึกแทนที่สถานะที่ให้มา)
rehydrated <Function> : ฟังก์ชั่นที่จะถูกเรียกเมื่อ rehydration เสร็จสิ้น มีประโยชน์เมื่อคุณใช้ nuxt.js ซึ่งการคืนสภาพของสถานะคงที่เกิดขึ้นแบบอะซิงโครนัส ค่าเริ่มต้นใน store => {}
fetchBeforeUse <Boolean> : บูลีนระบุว่าควรนำสถานะมาจากที่เก็บข้อมูลก่อนที่จะใช้ปลั๊กอิน ค่าเริ่มต้นเป็น false
assertStorage <Function> : ฟังก์ชั่นที่ใช้งานได้เพื่อให้แน่ใจว่ามีการจัดเก็บข้อมูลที่ใช้งานได้จากการเริ่มต้นของปลั๊กอิน ค่าเริ่มต้นคือการดำเนินการเขียนรายการเขียนบนอินสแตนซ์ที่จัดเก็บข้อมูลที่กำหนด หมายเหตุพฤติกรรมเริ่มต้นอาจทำให้เกิดข้อผิดพลาด (เช่น DOMException: QuotaExceededError )
ถ้ามันไม่เหมาะที่จะมีสถานะของร้านค้า Vuex ภายใน LocalStorage หนึ่งสามารถใช้ฟังก์ชั่นการใช้งานเพื่อใช้คุกกี้สำหรับสิ่งนั้น (หรืออื่น ๆ ที่คุณคิดได้);
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 ) ,
} ,
} ) ,
] ,
} ) ;ในความเป็นจริงวัตถุใด ๆ ที่ติดตามโปรโตคอลการจัดเก็บ (getItem, setItem, removeItem, ฯลฯ ) สามารถส่งผ่านได้:
createPersistedState ( { storage : window . sessionStorage } ) ;สิ่งนี้มีประโยชน์อย่างยิ่งเมื่อคุณใช้ปลั๊กอินนี้ร่วมกับการเรนเดอร์ฝั่งเซิร์ฟเวอร์ซึ่งสามารถผ่านอินสแตนซ์ของการจัดเก็บข้อมูล DOM ได้
หากคุณต้องการใช้ ที่เก็บข้อมูลในท้องถิ่น (หรือคุณต้องการ) แต่ต้องการป้องกันไม่ให้ผู้โจมตีตรวจสอบข้อมูลที่เก็บไว้ได้อย่างง่ายดายคุณสามารถทำให้งงงวยได้
สำคัญ
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 ) ,
} ,
} ) ,
] ,
} ) ; อย่างที่ดูเหมือนจะเป็นครั้งแรกที่เห็นมันเป็นไปไม่ได้ที่จะผ่านอินสแตนซ์ LocalForage เป็นคุณสมบัติ storage นี่คือความจริงที่ว่าผู้ตั้งค่าและตัวตั้งค่าทั้งหมดจะต้องเป็นแบบซิงโครนัสและวิธีการของ LocalForage นั้นเป็นแบบอะซิงโครนัส
โปรดดู Changelog สำหรับข้อมูลเพิ่มเติมเกี่ยวกับสิ่งที่เปลี่ยนแปลงไปเมื่อเร็ว ๆ นี้
ขอบคุณไปที่คนที่ยอดเยี่ยมเหล่านี้ (คีย์อีโมจิ):
Robin van der Vleuten - | ชาวเซบาสเตียน | บอริสเกรฟฟ์ | Cícero Pablo | Gurpreet Atwal | Jakub Koralewski | Jankees Van Woezik |
Jofferson Ramirez Tiquez | Jordan DePrez | Juan Villegas | Jürg Rast | Kartashov Alexey | Leonard Pauli | เนลสันหลิว |
นิโก้ | 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 |
โครงการนี้เป็นไปตามข้อกำหนดทั้งหมดของผู้เข้าร่วม การมีส่วนร่วมทุกชนิดยินดีต้อนรับ!
ใบอนุญาต MIT (MIT) โปรดดูไฟล์ใบอนุญาตสำหรับข้อมูลเพิ่มเติม
