如何使用 Mapstate 映射此数据

【问题标题】：How To Use Mapstate to map this data如何使用 Mapstate 映射此数据
【发布时间】：2020-07-25 22:11:49
【问题描述】：

我可以从this.$store.state.workermanage.staff.staff获取数据

但是如何使用 ...mapstate 交换此代码，谢谢

persons: this.$store.state.workermanage.staff.staff

【问题讨论】：

标签： javascript typescript vue.js vuex nuxt.js

【解决方案1】：

为 store.js 中的嵌套 staff 对象创建一个 getter

const store = new Vuex.Store({
  state: {
    workmanage: {
        staff: {
            staff: {

            } 
        }
    }
  },
  getters: {
    nestedStaff: state => {
      return state.workamage.staff.staff
    }
  }
})

在你的组件中使用 getter：

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'nestedStaff'
    ])
  }
}

之后，您可以使用nestedStaff，因为它是一个简单的计算属性。

【讨论】：

【解决方案2】：

computed: {
  ...mapState({ persons: state => state.workermanage.staff.staff })
}

并像这样使用：

{{ persons }}

【讨论】：