Два отдельных магазина в одном приложении

Question

У меня есть приложение vue.js, которое содержит целевую страницу, панель пользователя и панель администратора. Все они имеют в основном разные состояния, они разделяют только один shared модуль с такими вещами, как ширина страницы, токен, текущий пользователь и т. Д.

Проблема в том, что vuex разрешено иметь только одно централизованное хранилище, котороеозначает, что любой, кто переходит на целевую страницу, может видеть всю структуру магазина, что может быть потенциальной проблемой безопасности.

Идеальным решением было бы что-то вроде этого:

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

и в другомместо:

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

, где переменная здесь - это экземпляр Vuex.Store.

Но это, очевидно, не работает. Есть ли лучшее решение этой проблемы?

Answer 1

Простите, если я неправильно понял ваш вопрос, но вы не можете просто создать несколько магазинов? Я также хотел бы предостеречь вас от необходимости помнить, что на стороне клиента следует предполагать, что пользователь может получить к нему доступ. Так что не храните вещи на стороне клиента, если это связано с безопасностью.

~/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,
}

затем доступ по мере необходимости:

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