使用Vuex和Vue并显示数据
这是我在一个个人项目中遇到的一个问题的长篇解释。基本上，当我使用D3.JS从CSV文件读取数据时，我想在页面加载之前设置一个数据属性，我几乎完成了，但遇到了一个小问题。请继续阅读以获取更多详细信息。
基本上，当用户访问我的应用程序中的页面时，我希望显示天气图。正如我所说的，我正在使用D3.js读取数据，并创建了一个操作来实现这一点。它工作得很好-我可以console.log数据，我知道它已被读取。然而，在我的vue实例中，我有一个data属性，它将像这样保存数据集：
data() {
return {
name: this.$store.state.name
weatherData: this.$store.state.yearData
}
}然后，我希望确保用csv文件中的数据填充weatherData，以便在页面上显示它，如下所示：
<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>The Vue Intance：
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
Stack Overflow用户
发布于 2018-12-16 07:05:39
使用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
https://stackoverflow.com/questions/53797425
复制相似问题
腾讯云开发者
