تعرف على كيفية تخزين بيانات 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
المزيد من دروس vue:
- نظرة عامة على Vue.js
- واجهة سطر الأوامر Vue.js: تعرف على كيفية استخدامها
- أداة Vue.js DevTools
- تكوين VS Code لتطوير Vue
- أنشئ تطبيقك الأول باستخدام Vue.js
- مكونات الملف الفردي Vue.js
- قوالب Vue.js والاستيفاءات
- توجيهات Vue.js
- طرق Vue.js
- خصائص Vue.js المحسوبة
- تصميم مكونات Vue.js باستخدام CSS
- مراقبو Vue.js
- طرق Vue مقابل المراقبون مقابل الخصائص المحسوبة
- مرشحات Vue.js
- مكونات Vue.js
- فتحات Vue.js
- الدعائم المكون Vue.js
- أحداث Vue.js
- اتصالات مكونات Vue.js
- Vuex ، مدير ولاية Vue.js
- Vue ، استخدم مكونًا داخل مكون آخر
- Vue ، كيفية استخدام الخاصية كاسم للفئة
- كيفية استخدام SCSS مع Vue.js Single File Components
- استخدام Tailwind مع Vue.js
- جهاز التوجيه Vue
- إظهار مكون Vue ديناميكيًا
- ورقة الغش Vue.js
- قم بتخزين بيانات Vue على التخزين المحلي باستخدام Vuex
- كيفية تطبيق فئة ديناميكيًا باستخدام Vue
- كيفية استخدام Vue
- Vue ، لماذا يجب أن تكون البيانات دالة
- Roadmap to become a Vue.js developer in 2020