vue3 使用mapstate

Vue3 中使用 mapState 是针对 Vuex 状态管理的一种方便的方式。通过将状态器中的状态映射到组件的计算属性中，可以简化代码并提高代码的可读性。

在 Vue3 中，mapState 方法提供了两种使用方式。第一种是对象语法，可以将一个数组和对象映射到组件的计算属性中。例如：

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      count: state => state.count,
      message: state => state.message
    })
  }
}

这里将 `state.count` 映射到组件的 `count` 计算属性，将 `state.message` 映射到组件的 `message` 计算属性。这样在组件中可以直接使用这些映射的计算属性了。例如：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Message: {{ message }}</p>
  </div>
</template>

第二种使用方式是字符串语法，将一个数组中的状态映射到组件的计算属性中。例如：

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['count', 'message'])
  }
}

这里将 `state.count` 映射到组件的 `count` 计算属性，将 `state.message` 映射到组件的 `message` 计算属性。

总之，Vue3 中使用 mapState 方法可以非常方便地将 Vuex 状态管理的状态映射到组件中的计算属性中。这样可以提高代码的可读性，降低代码的复杂度，提高开发效率。