@anton_trofimov95

Как сделать категории для товаров в Nuxt?

Я не могу добиться, чтобы по клику на категорию открывалась нужная категория. Открывается пустая страница. Всю голову сломал, как это реализовать?

index.js

export const state = () => ({
    categoriesList: [
        { name: "Бани бочки", slug: "bany-bochki" },
        { name: "Дачные бани", slug: "dachnye-bany" },
        { name: "Брусовые бани", slug: "brusovye-bany" },
    ],
    currentCategory: {},
})
export const mutations = {
    /* SET_CATEGORIES_LIST(state) {
        state.categoriesList
    }, */
    SET_CURRENT_CATEGORY(state, category) {
        state.currentCategory = category
    }
}
export const getters = {
    CATEGORIESLIST(state) {
        return state.categoriesList
    }
}
export const actions = {
    getCurrentCategory({ commit }, { route }, { state }) {
        const category = state.categoriesList.find((cat) => cat.slug === route.params.CategorySlug)
        commit('SET_CURRENT_CATEGORY', category)
    }
}


CategoriesList.vue
<template>
  <div>
    <div v-for="category in CATEGORIESLIST" :key="category.slug">
      <nuxt-link :to="`/category/${category.slug}`">
        <p>{{ category.name }}</p>
      </nuxt-link>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters([
      'CATEGORIESLIST'
    ])
  },
  data() {
    return {
    };
  },
};
</script>

<style>
</style>

_CategorySlug.vue
<template>
  <div>
    <h1>{{ category.name }}</h1>
  </div>
</template>

<script>
import { mapState, mapActions} from 'vuex'

export default {
  computed: {
    ...mapState({
      category: 'currentCategory'
    }),
    ...mapActions({
      getCurrentCategory: 'getCurrentCategory'
    })
  },
  head () {
    return {
      title: this.category.name,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.category.name
        }
      ]
    }
  }
}
</script>
  • Вопрос задан
  • 152 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы