vuex persistedstate

Vuex-PersistedState

استمر وترطيب حالة Vuex بين إعادة تحميل الصفحة.

---

لم يعد يتم الحفاظ عليه! نظرًا لأنني لا أستخدم Vue في عملي اليومي ، يصبح من الصعب جدًا البقاء على اطلاع مع أي تغييرات مع أشياء مثل Vuex و Nuxt.js وغيرها من الأدوات التي يستخدمها المجتمع. لهذا السبب قررت التوقف عن قضاء وقت فراغي في هذا المستودع. لا تتردد في التواصل إذا كنت ترغب في تولي ملكية الحزمة على NPM. شكرًا لك على أي مساهمة قدمها أي منكم لهذا المشروع.

---

ثَبَّتَ

npm install --save vuex-persistedstate

بناء UMD متوفر أيضًا على 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

يمكن إنشاء مثيلات إضافية جديدة في ملفات منفصلة ، ولكن يجب استيرادها وإضافتها إلى كائن المكونات الإضافية في ملف 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 ]
} )

مثال مع nuxt.js

من الممكن استخدام 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 ) ;
} ; 

API

createPersistedState([options])

ينشئ مثيلًا جديدًا من البرنامج المساعد مع الخيارات المحددة. يمكن توفير الخيارات التالية لتكوين البرنامج المساعد لتلبية احتياجاتك المحددة:

• key <String> : مفتاح تخزين الحالة المستمرة تحت. الافتراضات إلى vuex .

• paths <Array> : مجموعة من أي مسارات للاستمرار جزئيًا في الدولة. إذا لم يتم إعطاء مسارات ، يتم استمرار الحالة الكاملة. إذا تم إعطاء صفيف فارغ ، فلا يتم استمرار أي حالة. يجب تحديد المسارات باستخدام ترميز DOT. في حالة استخدام الوحدات النمطية ، قم بتضمين اسم الوحدة النمطية. على سبيل المثال: "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> : عند إعادة الترطيب ، سواء أكان الكتابة فوق الحالة الحالية مع الإخراج من getState مباشرة ، بدلاً من دمج الكائنين مع deepmerge . الإعدادات الافتراضية إلى false .

• arrayMerger <Function> : دالة لدمج المصفوفات عند إعادة ترطيب الحالة. الإعدادات الافتراضية function (store, saved) { return saved } (تحل الحالة المحفوظة محل الحالة المقدمة).

• rehydrated <Function> : وظيفة سيتم استدعاؤها عند الانتهاء من الإماهة. مفيد عندما تستخدم nuxt.js ، والتي تحدث إماهة الحالة المستمرة بشكل غير متزامن. الإعدادات الافتراضية store => {}

• fetchBeforeUse <Boolean> : A Boolean الذي يشير إلى ما إذا كان ينبغي جلب الحالة من التخزين قبل استخدام المكون الإضافي. الإعدادات الافتراضية إلى false .

• assertStorage <Function> : وظيفة قابلة للتجاوز لضمان توفر التخزين ، مع تهيئة المكونات الإضافية. الافتراضي هو إجراء عملية تأخير الكتابة على مثيل التخزين المحدد. ملاحظة ، يمكن للسلوك الافتراضي أن يرمي خطأ (مثل DOMException: QuotaExceededError ).

تخصيص التخزين

إذا لم تكن مثالية أن يكون لديك حالة Vuex store داخل 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.

؟

إذا كنت بحاجة إلى استخدام سعة التخزين المحلية (أو تريد ذلك) ولكنك ترغب في منع المهاجمين من فحص البيانات المخزنة بسهولة ، فيمكنك تعويضها.

مهم ️ تعني المتجر Vuex يعني منع المهاجمين بسهولة الوصول إلى البيانات. هذه ليست وسيلة آمنة لتخزين البيانات الحساسة (مثل كلمات المرور والمعلومات الشخصية وما إلى ذلك) ، ويجب استخدامها دائمًا بالاقتران مع طريقة مصادقة أخرى للحفاظ على البيانات (مثل Firebase أو الخادم الخاص بك).

 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 . هذا يرجع إلى حقيقة أن جميع getters والمستقبين يجب أن تكون متزامنة وأن أساليب LocalForage غير متزامنة.

Changelog

يرجى الاطلاع على Changelog لمزيد من المعلومات حول ما تغير مؤخرًا.

المساهمين

شكراً لهؤلاء الأشخاص الرائعين (مفتاح الرموز التعبيرية):

روبن فان دير vleuten ؟ ️	سيباستيان	بوريس غرايف	سيرينو بابلو	Gurpreet Atwal ️	جاكوب كورالوسكي	جانكيز فان وويزيك
Jofferson Ramirez Tiquez	الأردن Deprez	خوان فيليجاس	يورغ راست	كارتاشوف أليكسي	ليونارد باولي	نيلسون ليو ️
نيكو ️	كوينتين دراير	رافائيل سونير	رودني ريم ️	ريان وانغ ️	سيباستيان شوبان	جيفجينغ
ماك آرثرور	بول ميليرو ️	غيوم دا سيلفا	جوناثان سانتر	Fábio Santos	Robertgr991	Jurijskolesnikovs
ديفيد بوند	Freek Van Rijt	إيليز هيرميلين	بيتر سيسكا	ديمتري فيليبوف	توماس ميتز ️	نيرون بهاتا
Joaoaraujo-Hotmart

يتبع هذا المشروع مواصفات جميع المساهمين. مساهمات من أي نوع ترحيب!

رخصة

ترخيص معهد ماساتشوستس للتكنولوجيا (MIT). يرجى الاطلاع على ملف الترخيص لمزيد من المعلومات.