使用 Vuex 使用 Vuex 并显示数据

Question

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

基本上，当用户来到我的应用程序中的页面时，我想显示天气图。正如我所说，我正在使用 D3.js 读取数据并创建一个操作来执行此操作。它工作得很好——我可以 console.log 数据，我知道它已被读取。但是，在我的 vue 实例中，我有一个数据属性，它将保存这样的数据集：

 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 使用 Vuex 并显示数据

Working with Vuex with Vue and displaying data

javascript

action

d3.js

vue.js

vuex