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

Ошибка "Cannot read properties of undefined (reading 'state')" возникает, когда вы пытаетесь обратиться к свойству "state" в объекте, который является undefined или null.

В случае с NUXT и Vuex, чтобы вывести данные из хранилища (store) в компонент, вам потребуется выполнить несколько шагов.

1. Установите пакеты Vuex и Vue в ваш проект NUXT, если они еще не установлены:

npm install vuex
npm install vue

2. Создайте файл store/index.js, в котором будет описано хранилище вашего приложения. В этом файле вы должны экспортировать экземпляр Vuex.Store.

import Vuex from 'vuex';

const store = new Vuex.Store({
  state: {
    // Здесь определяете ваше состояние
    message: 'Пример сообщения из хранилища',
  },
  mutations: {
    // Здесь определяете мутации для изменения состояния
  },
  actions: {
    // Здесь определяете действия для вызова мутаций
  },
  getters: {
    // Здесь определяете геттеры для получения данных из состояния
  },
});

export default store;

3. В nuxt.config.js подключите хранилище:

export default {
  // ...
  plugins: [
    '~/plugins/vuex'
  ],
  // ...
}

4. Создайте файл plugins/vuex.js, в котором будет производиться импорт и установка Vuex:

import Vue from 'vue';
import Vuex from 'vuex';
import store from '~/store'

Vue.use(Vuex);

// Инициализация хранилища
export default () => new Vuex.Store(store);

5. В вашем компоненте вы можете получить доступ к данным из хранилища, используя геттеры. Для этого вам нужно выполнить импорт шаблона mapState из Vuex и использовать его в свойстве computed:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState([
      'message' // Название свойства в хранилище
    ])
  }
}
</script>

Теперь вы можете использовать данные из хранилища в своем компоненте. В этом примере мы использовали геттер message из хранилища и отображаем его значение в шаблоне.

Надеюсь, эта информация поможет вам разрешить проблему и извлечь данные из хранилища NUXT в компоненты.