Модули Vuex Создание вложенного объекта - PullRequest
Новая
       7

Модули Vuex Создание вложенного объекта

0 голосов
/ 10 ноября 2018

Я пытался разделить мой файл store.js на несколько модулей магазина. У меня это работает (в некоторой степени), но это также породило большую проблему.

В моем первоначальном хранилище файлов, давайте предположим, что это мой объект состояния: 

state: { user: '' }

А вывод в инструментах разработчика Vuex показывает объект пользователя как следует: 

User: { name: "John", age: 33 }

Но после разбиения хранилища на модули пользовательский объект в инструментах разработчика Vuex выглядит следующим образом: 

User: { User: { name: "John", age: 33 } }

Таким образом, он создает новый объект, используя имя, которое я дал ему в объекте модулей, и импортирую в основной файл store.js, который затем содержит «истинный» пользовательский объект.

Есть ли способ заставить его не создавать новый объект и сохранять его таким же, как если бы все хранилище находилось внутри файла store.js?

-Sergio

EDIT:

Вот структура моих файлов: store store.js modules user.js

Код в модулях / user.js: 

const state = { User: '' }
const mutations = { ... }
const actions = { ... }
export default { state, mutations, actions }

код в моем магазине. Js 

import User from './modules/user';
Vue.use(Vuex);
export default new Vuex.Store({
   modules: {
      User
   }
});

До выхода в магазин я бы использовал инструменты Vuex Dev: User: { name: "John", age: 33 } После выхода из магазина я получаю: User: { User: { name: "John", age: 33 } }

Это вложение User из файла modules/user внутри User в файле store.js. Я хочу избежать этого (если это возможно), чтобы мне не приходилось менять все в моих файлах компонентов / шаблонов.

1 Ответ

0 голосов
/ 16 ноября 2018

«Дополнительный родительский объект», показанный в Vue Devtools, на самом деле является пространством имен .Если для атрибута namespace модуля пользователя задано значение false, состояние пользователя больше не будет помещаться в объект пространства имен и вместо этого будет

, зарегистрированным в глобальном пространстве имен * 1011.*.( Пространство имен Vuex )

Настройка namespace: false полностью подходит, если вы не ожидаете, что имена пользовательских функций конфликтуют с именами других функций модульного состояния. 

const store = new Vuex.Store({
  modules: {
    User: {
      namespaced: false,
      state: { user: '' },
      ...
    }
  }
}
...