CODEWITHSUNDEEP
javascriptvue.jsvuex
khernik
khernik

Reputation: 2091

Two separate stores in a single application

I have a vue.js application which contains a landing page, user dashboard, and an admin dashboard. All of them have mostly different states, they only share a single shared module with things like page width, token, current user, etc.

The problem is that vuex allowed to have just one centralized store, which means anyone who goes to a landing page can see the whole store structure, which could be a potential security issue.

The perfect solution would be something like this:

store: Object.merge({}, SharedStore, UserDashboardStore),

and in another place:

store: Object.merge({}, SharedStore, AdminDashboardStore),

where a variable here is an Vuex.Store instance.

But it doesn't work obviously. Is there a better solution to this problem?

Upvotes: 0

Views: 1563

Answers (1)

Crayons
Crayons

Reputation: 2066

Forgive me if I misunderstand your question, but can't you just create multiple stores? I would also caution you to remember that anything client side should be assumed that a user can access it. So don't go storing things client side if its related to security.

~/store/admin/actions.js
~/store/admin/getters.js
~/store/admin/mutations.js
~/store/admin/state.js
~/store/admin/store.js
~/store/user/actions.js
~/store/user/getters.js
~/store/user/mutations.js
~/store/user/state.js
~/store/user/store.js
~/store/actions.js
~/store/getters.js
~/store/mutations.js
~/store/state.js
~/store/store.js

~/store/store.js

import Vue from 'vue'
import Vuex from 'vuex'

import state from "./state"
import getters from "./getters"
import mutations from "./mutations"
import actions from "./actions"
import moduleAdmin from './admin/store.js'
import moduleUser from './user/store.js'

Vue.use(Vuex)

export default new Vuex.Store({
    getters,
    mutations,
    state,
    actions,
    modules: {
        admin: moduleAdmin,
        user: moduleUser,
    },
    strict: process.env.NODE_ENV !== 'production'
})

~/store/admin/store.js

import state from './state.js'
import getters from './getters.js'
import actions from './actions.js'
import mutations from './mutations.js'

export default {
    namespaced: true,
    state: state,
    getters: getters,
    actions: actions,
    mutations: mutations,
}

then access as needed:

return this.$store.state.someVariable;
return this.$store.state.admin.someVariable;
return this.$store.state.user.someVariable;

Upvotes: 1

Related Questions