#挑战每日一条沸点# - 凌云木丶丶 - 沸点 - 掘金

前端工程师

#挑战每日一条沸点#

Day05 讲一下mapState，并讲讲为什么要通过mapState辅助函数将state对象中的数据映射到组件的计算属性中？
> `mapState`是Vuex提供的一个辅助函数，用于简化在Vue组件中获取Vuex中`state`的过程。它可以帮助我们将`state`中的数据映射到组件的计算属性中，使得我们可以更方便地在模板中访问和使用这些数据。

使用`mapState`的语法如下：

```javascript
import { mapState } from 'vuex';

export default {
// 组件的其他选项...
computed: {
...mapState(['userAuthList', 'otherStateProperty']),
// 这里可以继续定义组件的其他计算属性...
},
};
```

通过`...mapState(['userAuthList', 'otherStateProperty'])`，我们可以将`userAuthList`和`otherStateProperty`这两个`state`对象中的属性映射到组件的计算属性中。这样，我们就可以在组件中直接通过`this.userAuthList`和`this.otherStateProperty`来访问和使用这些数据，而不需要手动去访问Vuex的`state`对象。

为什么要通过`mapState`辅助函数将`state`对象中的数据映射到组件的计算属性中呢？这是因为在Vue组件中，计算属性是响应式的，也就是说当`state`中的数据发生变化时，与之相关联的计算属性会自动更新。这样，我们就可以实时地反映出`state`中数据的最新状态，而无需手动去同步数据。

此外，通过`mapState`将`state`对象中的数据映射到计算属性中，还有助于避免在组件中直接引用Vuex的`state`对象，从而提高代码的可维护性和可读性。当我们需要获取`state`中的数据时，只需要通过计算属性的方式获取，而不需要在组件的代码中散落着直接引用`this.$store.state`。这种方式也使得我们在未来需要重构或修改`state`的结构时更加灵活，不会对组件产生太大的影响。

展开

青训营-快乐出发