Гранулярная организация с Vuex

Question

Я работаю над довольно крупным проектом, и хочу разбить модули Vuex на максимально возможное количество частей. Например, я хочу отделить функциональность API от UI, сохраняя данные, поступающие с сервера, изолированного от флагов компонента и так далее.

В документации (http://vuex.vuejs.org/en/structure.html) авторы предлагают разбить все на modules, что отлично. Проблема возникает, когда у меня есть, скажем, products в качестве страницы и products как данные, и я хочу, чтобы они были разделены.

Можно ли добиться чего-то вроде этого:

{ 
    modules: { 
    api: { 
     products: // ... 
    }, 
    pages: { 
     products: // ... 
    } 
    } 
} 

и быть в состоянии получить доступ к ним, как store.api.products и store.pages.products? Я ошибаюсь?

Спасибо!

Answer 1

Я принимаю взгляд на vuex кода, и я нашел это:

// retrieve nested modules 
const nestedMutations = this._createModuleMutations(module.modules, newNestedKeys) 

Оказывается, что вы можете сделать ваши vuex модули зернистые, выполнив:

{ 
    modules: { 
    api: { 
     modules: { 
     products: /* ... */ 
     } 
    }, 
    components: { 
     modules: { 
     page: /* ... */ 
     } 
    } 
    } 
} 

И это приведет к государственной структуре, как: