What is the error when getting $store in nuxt?

Question

Vue.js

Please tell me what could be wrong. I'm trying to write my information to $store in NUXT. But it doesn't work. I do everything according to the instructions:
1. Created index.js in the store
2. Specified store: true in the config
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. I'm trying to display information in the same component like this:

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

But nothing comes out. I don't understand at what stage the error is.

Answer 1

Try importing the Vuex state and adding the stars property to computed

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

Now you can use this.stars in script and stars in template

Answer 2

I'm just learning...
import PageHeader from '~/components/header.vue'
< Page-Header />
With or without dash