代码之家 › 专栏 › 技术社区 › ravenUSMC

使用Vuex和Vue并显示数据

vuex action vue.js d3.js javascript

ravenUSMC · 技术社区 · 6 年前

这是对我在个人项目中遇到的一个问题的一种很长的解释。基本上,当我使用d3.js从csv文件读取数据时,我希望在加载页面之前设置一个数据属性。我几乎已经完成了,但遇到了一个小问题。请继续阅读以获取更多详细信息。

基本上,当用户访问我的应用程序中的一个页面时,我想显示天气图。如我所说,我正在使用d3.js来读取数据并创建一个操作来完成这一操作。它工作得很好——我可以控制。记录数据,我知道它已经被读取了。但是,在我的Vue实例中,我有一个数据属性,它可以像这样保存数据集:

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

然后,我想确保天气数据是由csv文件中的数据填充的,所以我将它显示在如下页面上:

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

这里没什么特别的。当页面加载时,weatherdata为空。但是我有一个预先安装的生命周期挂钩,如果我注释掉其中的唯一一行,那么它将显示数据。如果我随后刷新页面,启动该操作以获取数据,然后取消对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
}

}

加载时的页面:注意空数组:

然后注释掉或者注释beforemount钩子中的一行,得到这个:数据!!!!

同样,我的最终目标是在页面完成加载之前调用操作并设置数据。最后,我知道我不需要Vuex,但这个项目进一步帮助我理解它。任何关于这件事发生原因的指导都是很好的。

1 回复 | 直到 6 年前

Efrat Levitan 6 年前

使用 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 也会有反应。

更多关于 地图状态 在这里: https://vuex.vuejs.org/guide/state.html#the-mapstate-helper