2

I'm building an SPA in Vue.js to manage documents and dashboard for logged users. I face the following problems:

  • I have one vuex store with several modules, managing different things.
  • One (some) of theses modules are for administration purpose (add new dashboard, edit dashboard... and many things).
  • Only very few of the final users will have access to administration area, hence use the admins vuex modules.

It seems not very optimized to have the admin store and states for all the users, so my question is: Is there an architectural way to add modules to the vuex store only on conditions (like, if the user is an Admin)? Maybe some kind of lazy-loading that will load this store only if the user access the admin interface?

EDIT : I will determine who is admin via an async API call, so the solution (if it exists) must allow to change store structure dynamicaly. I'd like to avoid the workaround of creating 2 vue instances. I think this is a common problem that arise in many solutions ? (having a big store for admin purpose that should not be present for common users)

vicovicovico
  • 358
  • 1
  • 4
  • 16

1 Answers1

2

You could save a separate variable and add certain modules based on a condition:

import normalModule from './normalModule';
import admin from './admin';

const modules = {
    normalModule
}

if (isAdmin) modules['admin'] = admin;

export default new Vuex.Store({
    modules,
});

How you determine if they're an admin is up to you.

Daniel_Knights
  • 7,940
  • 4
  • 21
  • 49
  • Yes but I will determine if a user is admin based on an API that is reached from this same store. When the store will be created (when the SPA is opened), I won't know if the user is an admin or not. It's only once logged in, that I will have access to his roles. So too late to add the module to the store ? Or maybe I can add it dynamicaly after I get the response from the server. I kinda thought once the store was created I could not edit its structure somehow. I'm clearly missing something in the workflow. – vicovicovico Oct 15 '20 at 14:41
  • Not 100% sure, but I think you'd have to create a new Vue instance to have a separate store like that. – Daniel_Knights Oct 15 '20 at 19:40