ViperOMG
@ViperOMG

NUXT — Cannot read properties of undefined (reading 'state'), или как вывести данные из Store в компонент?

Здравствуйте, пытаюсь сделать хранилище полученных данных в store и вытягивать оттуда данные, но при попытке это сделать, выдает такую ошибку:

I) Ошибка при загрузке страницы:
658cb87be8451820501829.png
II) Ошибка в VsCode:
658cb89b20c52691533206.png
1. pages/users/index.vue :
<template>
    <section>
      <h1> Users </h1>
      <ul>
        <li v-for="user in users" :key="user.id">
          <user-component :user="user" />
        </li>
      </ul>
    </section>
  </template>
  
  <script>
  import UserComponent from '~/components/UserComponent.vue'
  
  export default {
    components: {
      UserComponent
    }
  }
  </script>
<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState('users', ['users'])
  },
  methods: {
    ...mapActions('users', ['fetchUsers'])
  },
  async asyncData({ store, error }) {
    try {
      await store.dispatch('~/users/fetchUsers')
    } catch (err) {
      error(err)
    }
  }
}
</script>


2. store/users.js

export const state = () => ({
    users: []
  })
  
  export const mutations = {
    setUsers(state, users) {
      state.users = users
    }
  }
  
  export const actions = {
    async fetchUsers({ commit }) {
      try {
        const users = await this.$axios.$get('http://localhost:8000/users')
        commit('setUsers', users)
      } catch (error) {
        error (err)
      }
    }
  }

3. components/UserComponent.vue

<template>
    <div>
      <a :href="'#'" v-text="'User ' + user.name"></a>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      user: Object
    }
  }
  </script>


  • P.S. версия Nuxt: 2.17.2 ( vuex в нее зашит )
  • P.P.S. если делать все в пределах одного файла - работает, но если в пределах компонента и его потом вызывать, то не работает, подскажите, может я не понял как это должно работать ?
  • Вопрос задан
  • 471 просмотр
Решения вопроса 1
ViperOMG
@ViperOMG Автор вопроса
Долго мучался, на свою версию устанавливал vuex через --force и все сломалось.
было проделано следующее:
-вырезан установленный vuex
-переустановлен nuxtjs версия 2.17.2
теперь все работает
Всем спасибо за внимание, надеюсь кому-нибудь поможет.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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