Question

我有一个Vue组件，可以映射Vuex商店中的状态，突变，动作和吸气剂。

import {mapState, mapMutations, mapActions, mapGetters} from 'vuex'
export default {
  name: 'DefaultLayout',
  computed: {
    ...mapState({
      settings: (state) => state.settings,
      language: (state) => state.language
    }),
    ...mapState([
      'changeRouteTo'
    ]),
    ...mapGetters([
      'isLoggedIn'
    ])
  }
...

问题是，我无法像上述...mapGetters的第一个实例那样使用...mapState来使用显式语法。

我尝试过

...mapGetters({
  isLoggedIn: (state) => state.getters.isLoggedIn
})

和

...mapGetters({
  isLoggedIn: (state) => state.isLoggedIn
})

和

...mapGetters({
  isLoggedIn: (state) => this.$store.getters.isLoggedIn
})

但只有

...mapGetters([
  'isLoggedIn'
])

似乎可以正常工作。

Answer 1

要在...mapGetters中使用对象，语法如下：

...mapGetters({
  isLoggedIn: 'isLoggedIn'
})

其中的键是您希望吸气剂映射到的名称，而值是作为字符串的吸气剂的名称

Answer 2

使用mapGetters时，您应该使用getter来访问状态的某些部分，例如在商店中，您将拥有这样的东西

const state = {
  isLoggedIn:''
}

const getters = {
  isLoggedIn(state) {
    return state.isLoggedIn
   }
}
export default {
  state,
  getters
}

，并且在您的组件中，您可以访问isloggedIn属性，例如

 computed: {
      ...mapGetters(['isLoggedIn'])
    },

，现在您可以访问isLoggedIn属性因为mapGetters允许访问gitter的get函数返回存储的一部分，所以您不必重写get函数并将状态传递给它，那么逻辑就应该在getter中执行此操作

使用Vuex，为什么mapGetters不接受与mapState相同的语法？

2 个答案: