Организация структуры Nuxt.js приложения с вложенностью и Vuex

При разработке приложений на Nuxt.js важно правильно организовать структуру проекта, чтобы обеспечить масштабируемость и поддерживаемость кода. В этой статье я расскажу, как создать приложение с использованием вложенных компонентов и хранением данных в Vuex. Мы разберем, как организовать компоненты, страницы и хранилище, а также как ограничить использование компонентов только в определенных областях приложения.

---

Структура проекта

Для начала давайте рассмотрим структуру проекта, которую мы будем использовать:

Copy

├── assets/
├── components/
│   ├── PageName/
│   │   ├── ComponentA.vue
│   │   ├── ComponentB.vue
│   │   └── NestedFolder/
│   │       ├── NestedComponentA.vue
│   │       └── NestedComponentB.vue
├── pages/
│   ├── index.vue
│   └── page-name/
│       └── index.vue
├── store/
│   └── index.js
├── nuxt.config.js
└── ...

---

1. Компоненты

В папке components/ мы храним все компоненты приложения. Для каждой страницы создается отдельная подпапка с именем страницы (например, PageName). В этой подпапке находятся компоненты, которые используются только на соответствующей странице.

Компоненты первого уровня

Компоненты первого уровня, такие как ComponentA.vue и ComponentB.vue, могут использоваться только на странице page-name. Они находятся непосредственно в папке PageName/.

Пример ComponentA.vue:

vue

Copy

<template>
  <div>
    <p>This is Component A</p>
    <NestedComponentA />
  </div>
</template>

<script>
import NestedComponentA from '@/components/PageName/NestedFolder/NestedComponentA.vue'

export default {
  components: {
    NestedComponentA
  }
}
</script>

Вложенные компоненты

Вложенные компоненты, такие как NestedComponentA.vue, находятся в подпапке NestedFolder/. Они могут использоваться только внутри компонентов из папки PageName/. Например, NestedComponentA.vue может быть использован только внутри ComponentA.vue или ComponentB.vue.

Пример NestedComponentA.vue:

vue

Copy

<template>
  <div>
    <p>This is Nested Component A</p>
  </div>
</template>

<script>
export default {
  name: 'NestedComponentA'
}
</script>

---

2. Страницы

В папке pages/ находятся все страницы приложения. Каждая страница соответствует определенному маршруту. Например, страница page-name/index.vue будет доступна по маршруту /page-name.

Пример страницы page-name/index.vue:

vue

Copy

<template>
  <div>
    <h1>Page Name</h1>
    <p>{{ someData }}</p>
    <ComponentA />
    <ComponentB />
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import ComponentA from '@/components/PageName/ComponentA.vue'
import ComponentB from '@/components/PageName/ComponentB.vue'

export default {
  components: {
    ComponentA,
    ComponentB
  },
  computed: {
    ...mapState(['someData'])
  },
  async mounted() {
    await this.fetchSomeData()
  },
  methods: {
    ...mapActions(['fetchSomeData'])
  }
}
</script>

На этой странице мы используем только компоненты первого уровня (ComponentA.vue и ComponentB.vue). Вложенные компоненты из NestedFolder/ не могут быть использованы напрямую на странице.

---

3. Хранилище (Vuex)

Для управления состоянием приложения мы используем Vuex. В папке store/ создается файл index.js, где определяются состояния, мутации, действия и геттеры.

Пример store/index.js:

javascript

Copy

export const state = () => ({
  someData: null
})

export const mutations = {
  SET_SOME_DATA(state, data) {
    state.someData = data
  }
}

export const actions = {
  fetchSomeData({ commit }) {
    const data = 'Some fetched data'
    commit('SET_SOME_DATA', data)
  }
}

На странице мы можем использовать данные из хранилища с помощью mapState и mapActions.

---

4. Правила использования компонентов

Чтобы поддерживать порядок в проекте, важно соблюдать следующие правила:

1. Компоненты первого уровня (например, ComponentA.vue и ComponentB.vue) могут использоваться только на соответствующей странице (page-name/index.vue).
2. Вложенные компоненты (например, NestedComponentA.vue) могут использоваться только внутри компонентов из папки PageName/.
3. Компоненты из вложенных папок не должны использоваться напрямую на страницах.

---

Заключение

Организация структуры Nuxt.js приложения с использованием вложенности и Vuex позволяет создавать масштабируемые и поддерживаемые проекты. Разделение компонентов по страницам и ограничение их использования помогает избежать путаницы и упрощает разработку. Используйте описанный подход, чтобы ваше приложение оставалось чистым и удобным для дальнейшего развития.

Если у вас есть вопросы или предложения, оставляйте их в комментариях! Удачной разработки!