javascript - 单个应用程序中的两个独立商店

Question

我有一个 vue.js 应用程序，其中包含登录页面、用户仪表板和管理仪表板。它们都有不同的状态，它们只共享一个 shared 模块，其中包含页面宽度、 token 、当前用户等。

问题是 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;