How to connect one plugin twice but with different settings?

Question

Vue.js

There is a vue2-storage plugin that allows you to use the browser's localStorage.

In the settings of this plugin, you can specify the prefix that will be used for the keys.

In my Vue2 app, I need to store two kinds of data in localStorage: users and cars. These data are not related to each other and should not intersect.

Users is a list of logins as keys and their profile data as values:

evan {name: 'Evan', 'email': '[email protected]'}
piter {name: 'Piter', 'email': '[email protected]'}
eva {name: 'Eva', 'email': '[email protected]'}
...

Cars is a list of car numbers as keys and their characteristics as values:

А111АА11 {brand: 'Volkswagen', 'model': 'Polo', 'year': 2015, hp: 150}
А222АА22 {brand: 'BMW', 'model': 'X3', 'year': 2017, hp: 170}
А333АА33 {brand: 'Lada', 'model': 'Priora', 'year': 2008, hp: 98}
...

Is it possible to do something like this:

import Vue from 'vue';
import { Plugin } from 'vue2-storage';
Vue.use(Plugin, {prefix: 'users_'});
Vue.use(Plugin, {prefix: 'cars_'});

// И далее используем как то так:
this.$usersStorage.set(...);
this.$carsStorage.set(...);
...

Of course the above code won't work because Vue doesn't allow two of the same plugins to be included. Or how does it allow it?

Perhaps there is some kind of workaround, in the form of creating some kind of your own wrappers over the methods of this plugin?

Or even create two of your own plugins that will inherit from vue2-storage, but store themselves in the Vue application not just as this.$storage, but as this.$usersStorage and this.$carsStorage?

I understand that storing JSON objects in localStorage is not quite the right approach, and IndexedDB is probably a more suitable option for this. But there will be very little data, only about 10 records, and I don’t really want to use the more sprawling IndexedDB for them.

Answer 1

A bit off topic, but Vuex + vuex-persistedstate worked well for solving the problem.

Answer 2

It is quite unexpected to see a question on the Toaster that concerns my package))

Of course the code above won't work because Vue doesn't allow two of the same plugins to be connected. Or how does it allow it?

That's right, you won't be able to install the plugin twice))