Вывод данных из хранилища Vuex в компонент Vue

118
18 мая 2021, 07:50

Мне нужно создать компонент Vue, который будет принимать данные Json из хранилища Vuex. Когда я создаю тестовый код в песочнице, все работает. Но при попытке перенести этот код в проект начинаются проблемы.

Тестовый код в песочнице (работает, задачу решает): https://jsfiddle.net/ostapenko25/s3yzpgea/13/

Рабочий код в проекте отличается тем, что хранилище в проекте уже разбито на модули, и мне нужно создать и поключить новый модуль. Я делаю это так:

Файл index.js с регистрацией модулей Vuex:

import Vue from 'vue'
import Vuex from 'vuex'
import filters from './filters'
import odds from './odds'
import games from './games'
import games_list from './games_list'
import user from './user'
import vuexteststore from './vuexteststore'
Vue.use(Vuex)
export default new Vuex.Store({
    modules: {
        filters,
        odds,
        games,
        games_list,
        user,
        vuexteststore // мой новый компонент
    }
 })   

Модуль хранилища нового компонента vuexteststore.js (отличается от кода в песочнице, т.к. мне нужно создать не корневой компонент, а дочерний):

export default {
 state: {
    posts: [],
  },
  actions: {
    loadData({commit}) {
      axios.get('https://jsonplaceholder.typicode.com/posts').then((response) =>      {       
        commit('getPosts', response.data)
      })
    }
  },
  mutations: {
    getPosts(state, posts) {
      state.posts = posts
    },
  }
}

Новый компонент vuextest.vue

<template> 
        <ul>
          <li v-for="post in posts">
            <h1>
              {{post.id}}) {{post.title}}
            </h1>
            <p>
              {{post.body}}
            </p>
          </li>       
        </ul>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: "VuexTest",  
  computed: {
    ...mapState(['posts']) // в песчнице эта строка выглядит как Vuex.mapState(['posts']), но в проекте такая конструкция приводит к ошибке Vuex is not defined
  },    
  created() {    
    this.$store.dispatch('loadData') 
  } 
}     
</script>

Затем я поключаю новый компонент внутрь родительского компонента, где он должен быть расположен в проекте. Новый компонент отображается, однако данные из хранилища не выводятся. Vue-Devtools показывает posts:undefined. То есть компонент подключен, но не получает данные и не рендерится. Думаю, я неправильно вызываю action или mapState. Подскажите, пожалуйста, как сделать это корректно.

Answer 1

В модулях Vuex хранилище state должно являться функцией, которая возвращает объект с данными ( аналогия с date в компонентах )

state() {
  return {
    posts: [],
  }
}
READ ALSO
Не отображается шрифт на страницах сайта при использовании windows 7

Не отображается шрифт на страницах сайта при использовании windows 7

Шрифты подгружаются в src, появляются и сразу же становятся белымиЕсли убрать свойство font-family в body, подгружаются дефолтные шрифты

101
Как использовать then в данной ситуации?

Как использовать then в данной ситуации?

Паршу сайт, есть функцияКак мне вернуть из этой функции значение? Как я понимаю нужно сделать после each then, который будет возвращать resolve, но я получал...

95
$ is not defined Angularjs

$ is not defined Angularjs

При оценке $('phone-details') в консоли элемент выводится, $ так же в консоли определен, но при клике на строку таблицы появляется ошибка ReferenceError: $ is not defined

100