如何在vuex中定义状态变量？

Question

<v-select
          v-model="filterSystem"
          :items="currentSystems"
          :menu-props="{ maxHeight: '400' }"

          class="pa-0 ma-0"
          multiple
          outline
          dense

          persistent-hint
        />


 computed:{
dateRanges() {
  return [
    { text: i18n.t('Latest'), range: [null, null] },
    { text: i18n.t('Hour'), range: [-3600, null] },
    { text: i18n.t('SevenHours'), range: [-3600 * 6, null] },
    { text: i18n.t('TwentyHours'), range: [-3600 * 12, null] },
    { divider: true },
    { text: i18n.t('SelectRange'), range: [0, 0] },
  ]
 },
isDark() {
  return this.$store.getters.getPreference('isDark')
},
 history() {
  return this.item.history.map((h, index) => ({ index: index, ...h }))
},
 currentSystems() {
  return this.$store.getters['alarms/systems']
},
filterSystem: {
  get() {
    return this.$store.state.alarm.filter.system
  },
  set(value) {
    this.$store.dispatch('alarms/setFilter', {
      system: value.length > 0 ? value : null
    }).then(() => this.$store.dispatch('alarms/getAlamrs'))
  }
 },

}

我在状态和方法的getters动作和突变中使用了system[]......但无法在v-select组件中获得数据，我更新了一些计算属性......我看了一些教程......在教程中他们只使用方法或只使用方法。

Answer 1

你有没有试过使用mapState并从存储中访问系统值？你可以在这个链接上找到一个例子。https:/vuex.vuejs.orgguidestate.html。

将此添加到你的组件中。

import { mapState } from 'vuex'

computed: {
           ...mapState('alarms', ['systems'])
        },

然后你的v -select应该是这样的:

        <v-select
          v-model="filterSystem"
          :items="systems"
          :menu-props="{ maxHeight: '400' }"
          class="pa-0 ma-0"
          multiple
          outline
          dense
          persistent-hint
        />