【问题标题】:Bind vuex state to this in data()?在 data() 中将 vuex 状态绑定到这个?
【发布时间】:2017-09-08 13:59:48
【问题描述】:

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

在 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
    }
  }
}

但在 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"
  })
}

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

【问题讨论】:

  • sendEmails 应该是一个计算属性,您最终可以为它创建一个 getter(在您的商店中)。
  • @soju 你能解释一下为什么它必须是计算属性吗?
  • 你读过这个吗:vuex.vuejs.org/en/…

标签: javascript vue.js vuejs2 vuex


【解决方案1】:

我会将sendEmails 设置为mounted

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
       }
    }
}

【讨论】:

  • 这是将 vuex 状态绑定到本地数据的最佳方式吗,因为我还是 vue 的新手?
  • 最好的方法实际上取决于您要做什么以及何时/如何加载数据。也许你可以问一个问题?
  • 因为我使用 mapgetter 这就是我问你的原因,尝试使用 mapgetter 在 inet 中搜索很少?
  • 最好的方法是相对于你想做的事情。如果这适合您的需求,那么您就很好。如果您需要更多,那么可能有更好的方法。
猜你喜欢
  • 2020-09-09
  • 2023-03-19
  • 1970-01-01
  • 2019-07-13
  • 2020-10-01
  • 2018-08-09
  • 2018-03-27
  • 1970-01-01
  • 2020-01-26
相关资源
最近更新 更多