vue监听vuex的state

在 Vue 组件中监听 Vuex 的 state 变化，可以使用 Vuex 提供的辅助函数 `mapState` 或者直接使用 `this.$store.state`。

1. 使用 `mapState` 辅助函数

`mapState` 函数可以帮助我们快速将 state 映射到组件的计算属性中，以便在组件中使用。

例如，我们有一个 `count` 的 state，我们想要在组件中监听它的变化，可以这样写：

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

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  }
}
</script>

上面的代码中，我们使用 `mapState` 函数将 `count` 映射到了组件的计算属性中，并在模板中直接使用了 `count` 变量。

当 `count` 发生变化时，组件会自动响应更新。

2. 直接使用 `this.$store.state`

我们也可以直接使用 `this.$store.state` 来监听 Vuex 的 state 变化。

例如，我们有一个 `count` 的 state，我们想要在组件中监听它的变化，可以这样写：

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

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  }
}
</script>

上面的代码中，我们直接使用 `this.$store.state.count` 来监听 `count` 的变化，并在模板中直接使用了 `count` 变量。

当 `count` 发生变化时，组件会自动响应更新。