Чтобы лучше структурировать ваш код, вы можете разделить хранилище vuex на несколько модулей. См. ссылку по этому вопросу.
Вот пример моего магазина в проекте, над которым я сейчас работаю:
В моем проекте мне нужно несколько данных из API, поэтому я решил разделить свой магазин после этого ответа API, чтобы объединить все функции, которые принадлежат друг другу, в одном модуле. index.js используется для объединения всех модулей и экспорта магазина:
...
import categories from './modules/categories'
import transportation from './modules/transportation'
import insurances from './modules/insurances'
import booking from './modules/booking'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
categories,
transportation,
insurances,
booking
},
state: {
// here I have general stuff that doesn't need to be split in modules
},
mutations: {
// general stuff
},
actions: {
// general stuff
},
strict: true
})
Значение rootState становится важным, если мне нужен доступ к общим материалам в index.js или если я хочу получить доступ к данным из модуля из другого модуля.
Например:
Чтобы сделать бронирование, мне нужно знать, какая категория ie выбрана из текущего пользователя моего приложения. Чтобы достичь этого, я просто могу использовать опору rootState в действии:
/modules/categories.js
export default {
namespaced: true,
state: {
categories: [ // data I need acces to ]
}
/modules/booking.js
actions: {
async PUT_BOOKING({ state, commit, dispatch, rootState }) {
// access categories
const categories = rootState.categories.categories
// rootState -> access root
// categories -> namespaced module in store
// categories -> state categorie in namespaced module
}
}
Вы также можете, например, передать rootGetters действию. В моем примере у меня есть getter в моем модуле категорий, который возвращает индекс выбранной категории ie из массива категорий ie (= state prop).
async PUT_BOOKING({ state, commit, dispatch, rootState, rootGetters }) {
// access categories
const categories = rootState.categories.categories
// acces index of selected categorie
const index = rootGetters['categories/selCategorie']
}
Надеюсь, мой пример понятен, и я могу вам немного помочь.