在 data() 中将 vuex 状态绑定到 this?

ada*_*ng3 5 javascript vue.js vuex vuejs2

我正在将 vuex 升级到 2.0 并且想知道它是否可能在数据初始化之前使用 mapstate/getter?

在 Vuex 1.0 中,vuex 状态将在 data() 之前映射,所以我可以调用this然后我想要访问的状态

import { mapGetters } from 'vuex'

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

但是在 Vuex 2.0 中,我必须这样做 this.$store.state.settings.UserSettings.sendEmails

import { mapGetters, mapState } from 'vuex'

export default {
data: function () {
   return {
    sendEmails: this.$store.state.settings.UserSettings.sendEmails
   }
}
computed: {
  ...mapGetters({
    settings: "settings"
  })
}
Run Code Online (Sandbox Code Playgroud)

有没有办法在 data() 之前初始化该状态?我有多个组件利用数据初始化中的状态并且必须调用this.$store.state? 我意识到我可以做一些解构,但我只是想知道我是否可以避免这种情况。

who*_*boy 6

我会sendEmailsmounted

import { mapGetters, mapState } from 'vuex'

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

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

    mounted: function() {
       if (this.settings.UserSettings){
          this.sendEmails = this.settings.UserSettings.sendEmails
       }
    }
}
Run Code Online (Sandbox Code Playgroud)

  • 最好的方法是相对于你想做的事情而言的。如果这能满足您的需求,那么您就很好了。如果您需要更多,那么可能有更好的方法。 (2认同)