Currently immersed in the development of a sprawling website using Vue.js, I find myself grappling with the architecture of Vuex store.
The current folder structure is as follows:
.
├── build
├── src
│ └── components
│ ├── Header.vue
│ └── TimeStamp.vue
│ └── Photo.vue
│ └── pages
│ ├── index.vue
│ └── about.vue (includes Header.vue, Thumbnail.vue)
├── store
│ └── index.js
│ └── modules
│ ├── Header.js
│ └── TimeStamp.js
│ └── Photo.js
As it stands, my coding approach is to associate each component with a relevant module store. However, I am facing confusion due to the fact that all module states need to be imported as a single comprehensive object. This poses a challenge because even if a page does not require a certain component such as TimeStamp, its state still lingers within scope. In a scenario where there might be hundreds of states in total, yet only the Header.js store is needed, the rest become redundant.
Hence, my query is:
Is it feasible to create dynamic state objects for each page? For instance, in the About page, only import
Header.jsandPhoto.js, while in the Index page, only incorporateHeader.jsandTimeStamp.js. The envisioned structure would resemble something like this:
├── store
│ └── pages
│ ├── Index.js
│ └── About.js
│ └── News.js
│
│ └── modules
│ ├── Header.js
│ └── TimeStamp.js
│ └── Photo.js