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;

单个应用程序中有两个单独的商店

1 个答案: