vuex中的map函数及作用

在 Vue.js 中，Vuex 是一个专门为 Vue.js 应用程序开发的状态管理库。Vuex 将所有组件的状态集中存储在一个单一的地方，称为 state。Vuex 的 state 是响应式的，这意味着当 state 发生变化时，与之相关的组件将自动重新渲染。

为了在组件中使用 Vuex 状态，我们可以使用 mapState 函数。mapState 函数可以接受一个对象或数组作为参数，将 Vuex 中的 state 映射到组件的计算属性中。这样，我们就可以在组件中像使用普通计算属性一样使用 Vuex 的 state。

例如，我们可以将 Vuex 中的 state 映射到组件的计算属性中：

import { mapState } from 'vuex'

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

上面的代码将 Vuex 中的 count 状态映射到组件的计算属性中。我们可以在组件中像使用普通计算属性一样使用它：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    computed: {
      ...mapState({
        count: state => state.count
      })
    },
    methods: {
      increment() {
        this.$store.commit('increment')
      }
    }
  }
</script>

在上面的代码中，我们使用了 mapState 函数将 count 状态映射到组件的计算属性中。然后，我们在模板中使用这个计算属性来显示 count 的值。当用户点击“Increment”按钮时，我们调用 Vuex 的 commit 方法来更新 count 状态。由于 count 是响应式的，Vue.js 将自动重新渲染组件来显示新的 count 值。