[Vuejs]-Working with Vuex with Vue and displaying data

by

0👍

✅

use mapState instead of putting your data in the data object, which sometimes being late on updating the template.
just make your Vue instance to look like:

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
}

thats way, you work directly with one source of truth-the store, and your name and weatherData will be reactive as well.

more about mapState here: https://vuex.vuejs.org/guide/state.html#the-mapstate-helper

Leave a comment