В чем ошибка при получении $store в nuxt?

Попробовал. Не помогло. Точнее при добавлении

import axios from 'axios'
    import { mapState } from 'vuex'
    import { mapMutations } from 'vuex'
    import { mapActions } from 'vuex'

    import PageHeader from '~/components/header.vue'
    import FooTer from '~/components/footer.vue'
    export default {
        components: { PageHeader, FooTer  },
        computed:{
            mapState(['stars'])
        },

        async fetch ({ store, params }) {
            let { data } = await axios.get('https://jsonplaceholder.typicode.com/users')
           store.commit('setStars', data)

        }

    }

страница ругается на строку "mapState(['stars'])". Как правильно добавить computed?
В целом (в первоначальном варианте), в консоли такая ошибка "[vuex] unknown mutation type: setStars".
Код index.js такой:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = () => new Vuex.Store({

    state: {
        counter: 0
    },
    mutations: {
        increment (state) {
            state.counter++
        }
    }
})

export default store

Поправил вывод computed, добавив троеточие, сейчас страница не ругается. Но в консоли такая же ошибка "[vuex] unknown mutation type: setStars". И соответственно переменная stars ничего не выводит.

Ufolob, В store отсутствует нужная мутация и параметр состояния.
Добавить их в store/index.js

state: {
        counter: 0,
        stars: []
    },
    mutations: {
        increment (state) {
            state.counter++
        },
        setStars (state, payload) {
            state.stars = payload
        }
    }

Sponom, спасибо большое, заработало! Очень выручили.

Sponom, не сможешь подсказать еще в одном вопросе? Вот теперь никак не догоню как мне это использовать для validate(). Код такой:

async fetch ({ store, params }) {
            let { data } = await axios.get('https://jsonplaceholder.typicode.com/users')
            store.commit('setNews', data)

        },

        validate ({ params, news }) {
            // Check if `params.id` is an existing category
            news.forEach(function(item) {
                if (item.username === params.id) {
                    return true
                }

            });
          }

Как мне правильно организовать проверку url, есть ли они в массиве news? Для примера пока использую тестовый json и пытаюсь сравнить с username. Если пытаюсь использовать в функции как переменную this.store вот так:

validate ({ params, this.news }) {
            // Check if `params.id` is an existing category
            this.news.forEach(function(item) {
                if (item.username === params.id) {
                    return true
                }

            });

то страница ругается. Если использовать просто new, то ничего не работает. Пробывал передавать в validate store и вызывать там уже store.state.news - все равно не помогает. В чем может быть ошибка?

Посмотри про жизненный цикл загрузки nuxt
https://nuxtjs.org/guide#schema

Вызов validate() происходит раньше fetch()
А еще зачем ты проверяешь наличие элемента при загрузке всего списка?

Раздели это на маршруты. Примерно так:
pages/news/index.vue
pages/news/_id.vue

В первом получаешь список новостей,
Во втором конкретную новость и там же запрашивай 1 новость. Если она есть, с сервера придет соответствующий ответ, иначе статус ошибки.
В общем почитай документацию по nuxt. Там все по обработке ошибок и маршрутов написано)

А еще в fetch, validate нет доступа к this. Там свой контекст.
Ты его как раз используешь в параметрах функции: ({store,params}) и тд

Sponom, спасибо, изменил порядок вызова Validate() и Fetch(), но пока без изменений. Что касается структуры, так у меня все и есть) . Т.е. есть два файла, и в pages/news/_id.vue я как раз и делаю validate(). Просто в доках нет конкретного примера с Json и полученным новым state (в моем случае news).
Не подскажешь какую переменную мне передавать в validate() в моем случае? store или news ? И как ее использовать? Вот текущий код:

import axios from 'axios'
    import { mapState } from 'vuex'
    import { mapMutations } from 'vuex'
    import { mapActions } from 'vuex'

    import PageHeader from '~/components/header.vue'
    import FooTer from '~/components/footer.vue'
    export default {
        components: { PageHeader, FooTer  },
        computed:{
            ...mapState(['news'])
        },
        validate ({ params, news }) {
            // Check if `params.id` is an existing category
            news.forEach(function(item) {
                if (item.username === params.id) {
                    return true
                }

            });
        },
        async fetch ({ store, params }) {
            let { data } = await axios.get('https://jsonplaceholder.typicode.com/users')
            store.commit('setNews', data)

        }



    }

Большое спасибо за отзывчивость!

Ufolob, Дело не в порядке расположения методов в компоненте.
При загрузке validate() вызывается раньше, чем fetch(). На момент вызова validate() у тебя еще нет записи в store.
Попробуй сделать так:

validate ({ params, store }) {
            // Check if `params.id` is an existing category
            store.state.news.forEach(function(item) {
                if (item.username === params.id) {
                    return true
                }

            });
        }

А получение и запись новостей в store делай в функции

nuxtServerInit ({ commit }, { req }) {
    let { data } = await axios.get('https://jsonplaceholder.typicode.com/users')
            commit('setNews', data)
  }

эта функция должна находится в actions в файле store/index.js

Если дружишь с английским, почитай тут
https://nuxtjs.org/api/pages-validate/
https://nuxtjs.org/guide/vuex-store#the-nuxtserver...

Sponom, спасибо большое за ответы.
Вывел action в index.js, только добавил async (а то ошибка была), объект news доступен на всех страницах и могу его использовать.

,
    actions: {
      async  nuxtServerInit ({ commit }, { req }) {
            let { data } = await axios.get('https://jsonplaceholder.typicode.com/users')
            commit('setNews', data)
        }
    }

На странице _id.vue сделал код такой:

validate ({ params, store }) {
            // Check if `params.id` is an existing category
            store.state.news.forEach(function(item) {
                if (item.username === params.id) {
                    return true
                }

            });

        }

Но вот хоть тресни, validate() не работает. Хотя если делаю простую проверку, типа:

validate ({ params, store }) {
            // Check if `params.id` is an existing category
            /*
            store.state.news.forEach(function(item) {
                if (item.username === params.id) {
                    return true
                }

            });
            */
            if ('Bret' === params.id) {
                return true
            }
        }

, то страница /news/Bret доступна, другие соот-но нет. Т.е. работает как надо.

Ufolob,
И еще правильно, что ты проверяешь username === id? Просто не в курсе, какой у тебя массив данных))

У тебя return true происходит для функции forEach.
Попробуй вместо forEach использовать find так:

let item = store.state.news.find(function(item) {
                return item.username === params.id
            });
return item ? true : false;

Почитай про find тут https://developer.mozilla.org/ru/docs/Web/JavaScri...

Sponom, надо же и действительно сработало) Спасибо!
Куда можно благодарность закинуть?

Ufolob,
Всегда пожалуйста) будут еще вопросы, обращайся.
Яндекс кошель
410015720132867

Сергей, без вопросов у меня никак) Поблагодарил.