0

У меня есть хранилище с модулями. Вот структура:

Структура

Объявление хранилища:

Vue.use(Vuex);

export const store = new Vuex.Store({
  strict: process.env.NODE_ENV !== "production", //Защита от изменений не через мутациии
  modules: {
    navigation: navigation,
    crudForm: crudForm,
    toastBar: toastBar,
    progressDialog: progressDialog,
    loginForm: loginForm,
    auth: auth
  },
  getters: globalGetters,
  mutations: globalMutations,
  actions: globalActions,
  state: globalState
});

router.beforeEach((to, from, next) => {
  if (to.name !== "login" && !store.getters["auth/isAuthenticated"]) {
    next({name: "login"});
  }else {
    next()
  }
});

В state.js (глобальном), описываются глобальные состояния, в нем я декларирую следующее:

export default {
    loginForm: {
        title: "Авторизация",
        toast: "Пользователь авторизован",
        handler: {
            request: {
                url: "/internalauth/auth",
                type: POST,
                parameters: {
                    login: {
                        required: true
                    },
                    password: {
                        required: true
                    }
                }
            }
        }
    },
    pages: [
    ...
    //... Много объектов со вложенными составными объектами, подобных  loginForm
    ]
}

actions модуля loginForm:

 //loginForm/signIn (action)
 async signIn ({state, rootState, dispatch}) {
      let overlayTimeout = setTimeout(() => dispatch("progressDialog/show", null, {root: true}), 1500);

      console.log(rootState.loginForm.handler); //undefined


      await dispatch("auth/signIn", {
          handler: rootState.loginForm.handler,
          login: state.login,
          password: state.password
      }, { root: true });

      clearTimeout(overlayTimeout);

      dispatch("progressDialog/close", null, {root: true});
}

Мне нужно получить loginForm (глобальное состояние) в модуле loginForm, вместе во ВСЕМИ вложенными объектами (и их значениями по умолчанию).

Где бы я не пробывал получить это состояние, заполненными оказываются только поля title и toast, а handler всегда undefined.

Пробывал получать loginForm через rootState, mapState(в компонентах), rootGetters (оборачивал геттер на state.loginForm.handler), mapGetters(в компонентах), this.$store.state.loginForm, ничего не помогает, loginForm.handler всегда пустой.

Что я не так делаю и как тогда быть? Объясните пожалуйта. Просто аналогично, я получаю подобные комплексные объекты из массива pages, лежащего в глобальных состояний и у него все вложенные объекты получаются заполненными.

Если я правильно понимаю, vuex не делает handler реактивным, как это можно обойти? Я знаю, что мог бы явно инициализировать все эти состояния в init мутации глобальных состояний на старте приложения через vue.set(...), но это будет не удобно. Глобальный state.js у меня является чем то вроде глобальной конфигурации, в котором удобно быстро настраивать все окружение приложения

Посмотреть ДЕМО, где при аналогичном подходе значения у handler есть

7
  • 1
    а если изменить ключ handler на какой-нибудь другой?
    – Dmytro
    24 июн 2019 в 12:12
  • @Дмытрык хм, а что в vuex в каждом составном объекте есть handler? Эм, сейчас попробую
    – Xambey
    24 июн 2019 в 12:14
  • хз, но с учетом симптомов, наименование настроживает)
    – Dmytro
    24 июн 2019 в 12:16
  • @Дмытрык нет, все также.Переименовал handler в test async signIn ({ dispatch, state, rootState }) { let loginForm = rootState.loginForm; console.log(loginForm.test); //undefined await dispatch("auth/signIn", { handler: loginForm.test, login: state.login, password: state.password }, { root: true }); },
    – Xambey
    24 июн 2019 в 12:19
  • а Вы можете выложить воспроизводимый пример?
    – Dmytro
    24 июн 2019 в 12:53

1 ответ 1

0

Причиной неправильного биндинга вложенных свойств было то, что имя корневого состояния совпадает с именем модуля, который присутствует внутри хранилища. Vuex хранит объекты состояний модулей внутри объекта state с глобальными свойствами

Т.е НЕЛЬЗЯ создавать ГЛОБАЛЬНЫЕ СОСТОЯНИЯ, корневые имена которых совпадают с именами модулей. В моем случае состояние loginForm, совпадает с именем модуля loginForm.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.