I'm upgrading vuex to 2.0 and was wondering if its possible use mapstate/getters before data gets initialized?

In Vuex 1.0, the vuex state would be mapped before data() did so I could just call this and then the state I wanted to access

import { mapGetters } from 'vuex'

export default {
  vuex: {
    getters: {
      userSettings: ({ settings }) => settings.userSettings,
    }
  },
  data: function () {
    return {
      sendEmails: this.userSettings.sendEmails
    }
  }
}

But in Vuex 2.0, I have to do this.$store.state.settings.UserSettings.sendEmails

import { mapGetters, mapState } from 'vuex'

export default {
data: function () {
   return {
    sendEmails: this.$store.state.settings.UserSettings.sendEmails
   }
}
puted: {
  ...mapGetters({
    settings: "settings"
  })
}

Is there a way to have that state initialized before data()? I have multiple ponents that make use of the state in the data initialization and having to call this.$store.state? I realize I can do some destructuring but I was just wondering if I could avoid that.

I'm upgrading vuex to 2.0 and was wondering if its possible use mapstate/getters before data gets initialized?

In Vuex 1.0, the vuex state would be mapped before data() did so I could just call this and then the state I wanted to access

import { mapGetters } from 'vuex'

export default {
  vuex: {
    getters: {
      userSettings: ({ settings }) => settings.userSettings,
    }
  },
  data: function () {
    return {
      sendEmails: this.userSettings.sendEmails
    }
  }
}

But in Vuex 2.0, I have to do this.$store.state.settings.UserSettings.sendEmails

import { mapGetters, mapState } from 'vuex'

export default {
data: function () {
   return {
    sendEmails: this.$store.state.settings.UserSettings.sendEmails
   }
}
puted: {
  ...mapGetters({
    settings: "settings"
  })
}

Is there a way to have that state initialized before data()? I have multiple ponents that make use of the state in the data initialization and having to call this.$store.state? I realize I can do some destructuring but I was just wondering if I could avoid that.

• javascript
• vue.js
• vuejs2
• vuex

• sendEmails should be a puted property, you can eventually create a getter for it (in your store). – soju Commented Apr 12, 2017 at 19:42
• @soju can you explain why it must be a puted property? – Eric Guan Commented Apr 13, 2017 at 21:33
• 1 Did you read this : vuex.vuejs/en/… ? – soju Commented Apr 14, 2017 at 7:31

1 Answer 1

I would set sendEmails in mounted

import { mapGetters, mapState } from 'vuex'

export default {
    data: function () {
       return {
        sendEmails: []
       }
    }

    puted: {
      ...mapGetters({
        settings: "settings"
      })
    },

    mounted: function() {
       if (this.settings.UserSettings){
          this.sendEmails = this.settings.UserSettings.sendEmails
       }
    }
}