Vue.js Warehouse
A Cross-browser storage for Vue.js and Nuxt.js, with plugins support and easy extensibility based on Store.js.
This plugin will pick the best available browser storage, and automatically falls back to the first available storage that works.
Read this in other languages: English, Español
Features
- Backed by the great library Store.js
- Support for multiple Storages (localStorage, cookies, etc.)
- Basic key/value storage functionality (
get/set/remove/each
) - Easy integration with Vue.js
- Support for Nuxt.js
- Get notified with Vuex when the stored values change
Why use this plugin
Some reasons why you could consider to use this plugin:
- Use a fallback Browser storage method in case the user's browser has limitations. Safari in Private mode can deny writing data in localStorage.
- Easy extensibility with Plugins. Support for expiring stored values at a given time, declare default values, etc.
- A consistent API across browsers for a key/value storage functionality.
- Easy definition of alternative Storage methods. For example: you could reuse a Vue Component, that relies on a storage method, in the user's browser (using localStorage) or a mobile app (using NativeScript application-settings module) just by changing the storage method without modifying the internal logic of the component.
- Synchronization of stored values changes with Vuex.
Installation
This module is distributed via npm which is bundled with node and should be installed as one of your project's dependencies
:
npm install --save store vue-warehouse
or
yarn add store vue-warehouse
Example of use
Suppose you want to use localStorage by default and cookies as an alternative in case your user's browser doesn't allow any interaction with localStorage (Safari Private mode). Besides, you want to define defaults values and an expiration date for all the data that is going to be saved.
Configuration for Vue.js
Vue
Configuration for Nuxt.js
modules: 'vue-warehouse/nuxt' vuex: true plugins: 'store/plugins/expire' 'store/plugins/defaults' storages: 'store/storages/localStorage' 'store/storages/cookieStorage'
API Usage
// Define defaults valuesthis$warehouse // Change current user with an expiration date of 2 hours starting from nowconst expiration = + 3600 * 2000this$warehouse // Get current user valuethis$warehouse // Get current user expirationthis$warehouse // Remove current userthis$warehouse // return the default value -> { name: 'John Doe' } // Clear all keysthis$warehouse // Loop over all stored valuesthis$warehouse
Vuex State
The last change made to the browser store (localStorage, cookie, etc.) are synced with the Vuex state:
// Store current userthis$warehouse // Update the userthis$warehouse // get state valuesstorestatewarehouseaction // action performed -> setstorestatewarehousekey // key affected -> userstorestatewarehousevalue // stored value -> { name: 'Marie Doe' }storestatewarehouseoldValue // last value -> { name: 'John Doe' }
Documentation & Support
- 📄 If you want extra details of how to configure and use this plugin, the full documentation is available at https://marquez.co/docs/vue-warehouse.
- 🐞 For Bug reports or Feature requests, use the Issues section.
- 💬 For questions, you can also use the Issues section.
- 🚀 You may also want to follow me on Twitter.
Professional Support
This project is sponsored by me, a Full Stack Developer. If you require Professional Assistance on your project(s), please contact me at https://marquez.co.
Contributing
Please make sure to read the Contributing Guide before making a pull request.
Code of Conduct
Everyone participating in this project is expected to agree to abide by the Code of Conduct.
License
Code released under the MIT License.