0

Мне нужно создать компонент 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. Подскажите, пожалуйста, как сделать это корректно.

3
  • может в ответе сервера приходит не такой ответ, как Вы ожидаете? Закомментируйте this.$store.dispatch('loadData') и проверьте posts
    – Dmytro
    7 авг 2019 в 13:14
  • Перепишите вычисляемые свойства на геттеры ...mapGetters(['posts']) и в хранилище соответственно: getters: {posts: state => state.posts},
    – user256824
    7 авг 2019 в 15:00
  • @РустамГимранов, огромное спасибо, это сработало!
    – Yulia
    8 авг 2019 в 7:40

1 ответ 1

1

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

state() {
  return {
    posts: [],
  }
}
1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.