Работа с Vuex с Vue и отображение данных - PullRequest
Новая
       34

Работа с Vuex с Vue и отображение данных

0 голосов
/ 16 декабря 2018

Это довольно длинное объяснение проблемы, с которой я столкнулся в личном проекте.По сути, я хочу установить свойство данных до загрузки моей страницы, когда я читаю данные из файла CSV с помощью D3.JS.Я почти сделал это, но столкнулся с небольшой проблемой.Пожалуйста, читайте дальше, чтобы получить более подробную информацию.

Обычно, когда пользователь заходит на страницу в моем приложении, я хочу отображать графики погоды.Как я уже сказал, я использую D3.js для чтения данных и создал для этого действие.Он отлично работает, я могу console.log данных, и я знаю, что они были прочитаны.Однако в моем экземпляре vue у меня есть свойство data, которое будет содержать набор данных следующим образом: 

 data() {
  return {
    name: this.$store.state.name
    weatherData: this.$store.state.yearData
  }
}

Затем я хочу убедиться, что weatherData заполнен данными из файла csv, поэтому я отображаюэто на странице примерно так: 

<p>{{ weatherData }}</p>

Ничего особенного здесь нет.Когда страница загружается, weatherData остается пустым.Но у меня есть хук жизненного цикла beforeMount, и если я закомментирую единственную строку в нем, он будет отображать данные.Если я затем обновлю страницу, запустите действие, чтобы получить данные, а затем раскомментируйте строку в ловушке beforeMount, тогда данные появятся!Поэтому, прежде чем я продолжу, это мой полный код магазина: 

export const store = new Vuex.Store({
 state: {
   name: 'Weather Data'
   yearData: []
  },
 getters: {
 },
 mutations: {
  setYearData(state, data) {
   state.yearData = data
  }
 },
actions: {
getYearData: ({commit}) => {
  d3.csv("../src/components/data/alaska.csv")
    .then(function(data){
      let yearData = []
      for (let i = 0; i < data.length; i++){
        let day = data[i].AKST
        yearData.push(day)
      }
      //console.log(yearData)
      commit('setYearData', yearData)
    })
  }
})

Вот части файла vue: Шаблон: 

  <p>{{ weatherData }}</p>

Интервью Vue: 

 export default {
  name: 'Weather',
  data() {
    return {
      name: this.$store.state.name,
      weatherData: this.$store.state.yearData
    }
  },
  methods: {
     ...mapActions([
    'getYearData'
    ])
 },
beforeMount(){
  this.$store.dispatch('getYearData') //(un)Commenting out this line will make my data appear
}

}

Страница при загрузке: обратите внимание на пустой массив: enter image description here

Затем либо закомментируйте, либо закомментируйте одну строку в ловушке beforeMount иполучите это: ДАННЫЕ !!!

enter image description here

Опять же, моя конечная цель - вызвать действие и набор данных до завершения загрузки страницы.Наконец, я знаю, что мне не нужен VUEX, но этот проект помогает мне понять его.Любое руководство о том, почему это происходит, было бы замечательно.

1 Ответ

0 голосов
/ 16 декабря 2018

используйте mapState вместо помещения ваших данных в объект data, что иногда приводит к задержке при обновлении шаблона.просто сделайте свой экземпляр Vue следующим образом: 

import {mapState} from 'vuex'
export default {
  name: 'Weather',
  data() {
    return { }
  },
computed:{
   ...mapState({
      name: state=>state.name,
      weatherData: state=>state.yearData
   })
},
  methods: {
     ...mapActions([
    'getYearData'
    ])
 },
beforeMount(){
  this.$store.dispatch('getYearData') //(un)Commenting out this line will make my data appear
}

Таким образом, вы работаете напрямую с одним источником правды - хранилищем, и ваши name и weatherData также будут реактивными.

подробнее о mapState здесь: https://vuex.vuejs.org/guide/state.html#the-mapstate-helper

...