قم بتخزين بيانات Vue على التخزين المحلي باستخدام Vuex

تعرف على كيفية تخزين بيانات Vuex تلقائيًا في localStorage أو sessionStorage

عند الحديث عن تخزين البيانات ، هناك طرق مختلفة لاستمرار البيانات.

أحدهما بسيط للغاية ، وهو مثالي للنماذج الأولية ، وهو يخزن البيانات باستخدام امتدادواجهة برمجة تطبيقات تخزين الويب: localStorage و sessionStorage.

باستخدام Vue ، يمكنك الاستفادة من واجهة برمجة التطبيقات هذه بعدة طرق. أحد أبسطها هو الاعتماد علىvuex-persistمكتبة.

يمكنك تثبيته باستخدام npm أو الغزل:

npm install vuex-persist
#or
yarn add vuex-persist

افتح ملف متجر Vuex ، وأضف:

import VuexPersist from 'vuex-persist'

تهيئة VuexPersist:

const vuexPersist = new VuexPersist({
  key: 'my-app',
  storage: window.localStorage
})

keyهو المفتاح المستخدم في قاعدة بيانات التخزين المحلي.

يتغيرونlocalStorageمعsessionStorageلاستخدام نظام التخزين الآخر (لكل منها خصائصه الخاصة ، راجع مستند Web Storage API الذي ربطته أعلاه).

بعد ذلك ، أضفvuexPersistإلى قائمة ملحقات Vuex ، عند تهيئة المتجر:

const store = new Vuex.Store({
  //...initialization
  plugins: [vuexPersist.plugin]
})

هذا هو! في أي وقت يتم تغيير المتجر ، ستستمر المكتبة في وضعه في المتصفح.

هناك المزيد من الإمكانات المتقدمة التي يمكنك اكتشافها علىالوثائق الرسمية، ولكن هذه هي الأساسيات لتبدأ.

تحميل مجانيكتيب Vue