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