vue中mapState原理与使用方式

1. 原理

`mapState` 是 Vue.js 提供的一个辅助函数，用于将 Vuex store 中的状态映射到组件的计算属性中。其本质是一个函数，接收一个对象作为参数，对象的属性值是 store 中的 state 对象的属性名，属性值是计算属性的名称。

例如：

computed: {
  ...mapState({
    count: 'count'
  })
}

上面的代码将 store 中的 `state.count` 映射到组件的 `count` 计算属性中。

2. 使用方式

`mapState` 的使用方式有两种：

- 对象形式

computed: {
  ...mapState({
    count: 'count',
    name: 'user.name'
  })
}

- 数组形式

computed: {
  ...mapState([
    'count',
    'user.name'
  ])
}

数组形式的写法比较简洁，但是不方便指定计算属性的名称。如果需要指定名称，建议使用对象形式。

可以同时使用多个 `mapState`，它们会合并为一个计算属性对象：

computed: {
  ...mapState({
    count: 'count'
  }),
  ...mapState({
    name: 'user.name'
  })
}