Question

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

基本上，当用户访问我的应用程序中的页面时，我想显示天气图。就像我说的那样，我正在使用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
}

}

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

然后注释掉，或在beforeMount钩子中注释掉一行并得到以下内容：The data !!!

同样，我的最终目标是在页面完成加载之前调用动作并设置数据。最后，我知道我不需要VUEX，但是这个项目正在进一步帮助我理解它。关于为什么会发生这种情况的任何指导都是很好的。

Answer 1

使用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

将Vuex与Vue配合使用并显示数据

1 个答案: