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

Question

[Ufolob]

Подскажите пожалуйста, в чем может быть ошибка. Пытаюсь записать в $store в NUXT свою информацию. Но не получается. Делаю все по инструкции:
1. Создал в store index.js
2. указал в конфиге store: true
3.

<script>
    import axios from 'axios'
    import PageHeader from '~/components/header.vue'
    import FooTer from '~/components/footer.vue'
    export default {
        components: { PageHeader, FooTer  },
        async fetch ({ store, params }) {
            let { data } = await axios.get('https://jsonplaceholder.typicode.com/users')
           store.commit('setStars', data)

        }
    }
</script>

4. Пытаюсь в этом же компоненте вывести информацию так:

<template>

    <div class="page">
        <Page-Header/>
        <section>
            <h1>Новости</h1>
            <li v-for="user in $store.state.stars" :key="user.username">
                {{ user.username }}
            </li>


        </section>
        <Foo-Ter/>
    </div>

</template>

Но ничего не выходит. Никак не пойму на каком этапе ошибка.

Comments

[Andrey Suha]

Может дело в state или мутации? Хотя конечно вряд-ли, они тут точно не причем

[Сергей]

Можете показать код store/index.js ?

Answer 1

[Сергей]

Попробуй импортировать состояние Vuex
import {mapState} from 'vuex'

а свойство stars добавь в computed

...
computed:{
  ...mapState(['stars'])
}

Теперь можно использовать this.stars в скрипте и stars в шаблоне

Comments

[Ufolob]

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

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

[Ufolob]

Поправил вывод 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
        }
    }

[Ufolob]

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

[Ufolob]

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}) и тд

[Ufolob]

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...

[Ufolob]

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...

[Ufolob]

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

[Сергей]

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

[Ufolob]

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

Answer 2

[Александр]

Я только учусь ...
import PageHeader from '~/components/header.vue'
<Page-Header/>
С тире или без

Comments

[Сергей]

Рекомендуется использовать
<page-header/>
либо
<PageHeader/>
Здесь можно почитать рекомендации
https://ru.vuejs.org/v2/style-guide/

[Александр]

Sponom,
Спасибо почитал наконец Имена компонентов из нескольких слов )))
НО
Автоматическая глобальная регистрация базовых комп... Я не вижу в примере чтобы они в шаблоне писали Base-Button, Base-Icon, Base-Input с тире. Ведь может все таки ошибка из-за этого )))

[Сергей]

Александр, там и написано, что есть два способа
https://ru.vuejs.org/v2/guide/components-registrat...
Ты регистрируешь компонент как BaseButton.vue
А в шаблоне используешь либо либо
Смешанный вариант не подойдет