Vuex中的Vuemapgetters

小蓝 • 2025-01-06 15:17 • 编程

在Vuex中，MapGetters可以使得在组件中访问Vuex store的getters函数变得更加容易。这篇文章将会从以下几个方面就Vuemapgetters进行详细地阐述。

一、映射多个Getters到计算属性

...mapGetters([
  'getters1',
  'getters2',
  'getters3'
])

上述代码就是将组件中的computed属性映射到store中的多个getter函数。上面的代码与下面的代码是等价的：

computed: {
  ...Vuex.mapGetters([
    'getters1',
    'getters2',
    'getters3'
  ])
}

为了将多个Getters映射到组件中，你可以传递一个数组到该映射函数中。这使得我们可以使用不同的格式与组件相关的计算属性实现更好的灵活度。

二、使用对象映射Getters到计算属性

...mapGetters({
  getter1Alias: 'getters1',
  getter2Alias: 'getters2'
})

上述代码与下面的代码是等价的：

computed: {
  getter1Alias: Vuex.mapGetters('getters1'),
  getter2Alias: Vuex.mapGetters('getters2')
}

对象映射方式是另一种组合多个Getters的方式，该方法允许我们使用更有意义的别名来表示各个Getters。

三、在继承getters的同时在计算属性中增加自己的getter函数

...mapGetters({
  getter1Alias: 'getters1',
  getter2Alias: 'getters2',
  myAwesomeGetter: state => {...}
})

使用对象方式映射Getters可以允许我们在映射getter函数时添加自定义的getter函数。一旦getter在store中注册了会自动被Vuex计算。你可以想象一下传入的函数会被添加到store的getters中，就像下面这个例子：

const store = new Vuex.Store({
  state: {...},
  getters: {
    getters1: state => {...},
    getters2: state => {...},
    myAwesomeGetter: state => {...}
  },
  actions: {...},
  mutations: {...}
})

四、使用命名空间

使用命名空间使得我们可以为组件关联上一个特定module的actions和mutations，但是默认情况下，它不能为getter函数提供这样一种映射。相对地，用户必须将getter函数与正确的module名称拼接起来来实现映射，就像这个例子：

...mapGetters('myModule/', {
  getter1Alias: 'getters1',
  getter2Alias： 'getters2'
})

上述代码与下面的代码是等价的：

computed: {
  getter1Alias: Vuex.mapGetters('myModule/', 'getters1'),
  getter2Alias: Vuex.mapGetters('myModule/', 'getters2')
}

这种情况下，去除命名空间的映射方式不会起作用，所以必须使用module名称。

五、结论

Vuemapgetters应该是Vuex中最重要的一个策略，因为它使得在组件中访问store的getters函数变得更加容易。通过多个Getters与计算属性的映射，对象映射方式等，我们可以使用不同的技巧来使用它，当然相比于去除命名空间的映射方式，使用命名空间的方式更加的有效和准确。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/312943.html