Vuex 中的 useStore 怎么用？

在 Vue.js 的开发中，状态管理是一个关键环节，Vuex 为我们提供了一种集中式的状态管理模式，而 useStore 则是在 Vue 3 中与 Vuex 配合使用的一个重要函数，那它究竟该怎么用呢？下面我们来详细探讨。

useStore 的基本概念

useStore 是 Vuex 为 Vue 3 提供的一个组合式函数，它的作用是从 Vuex 的 store 中获取状态、提交 mutation、分发 action 等操作，它是我们在组件中与 Vuex store 进行交互的桥梁。

使用步骤

1. 安装与配置 Vuex

   你需要在项目中安装 Vuex，可以通过 npm 或 yarn 进行安装，`npm install vuex@next --save`，安装完成后，创建一个 store 文件（通常命名为 store.js 或 store/index.js），在其中配置 Vuex 的 store。

   示例代码：

   ```javascript import { createStore } from 'vuex'

const store = createStore({ state() { return { count: 0 } }, mutations: { increment(state) { state.count++ } }, actions: { incrementAsync({ commit }) { setTimeout(() => { commit('increment') }, 1000) } } })

export default store

**在 Vue 组件中使用 useStore**
<p>在你的 Vue 组件（.vue 文件）中，首先要导入 useStore 函数。</p>
<p>示例代码：</p>
```javascript
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>
<script>
import { useStore } from 'vuex'
export default {
  setup() {
    const store = useStore()
    // 获取状态
    const count = store.state.count
    // 提交 mutation
    const increment = () => {
      store.commit('increment')
    }
    // 分发 action
    const incrementAsync = () => {
      store.dispatch('incrementAsync')
    }
    return {
      count,
      increment,
      incrementAsync
    }
  }
}
</script>

在上面的代码中，我们通过 `useStore()` 获取了 store 实例，从 `store.state` 中获取了 `count` 状态，通过 `store.commit` 提交了 `increment` mutation，通过 `store.dispatch` 分发了 `incrementAsync` action。

使用场景

1. 多组件共享状态

   当多个组件需要共享同一个状态时，比如一个购物车的商品数量，我们可以在 Vuex 的 store 中定义这个状态，然后在各个组件中通过 useStore 来获取和修改它，这样，无论哪个组件对状态进行了修改,其他组件都能实时获取到最新的值。

2. 复杂业务逻辑处理

   对于一些涉及异步操作或者多个 mutation 组合的复杂业务逻辑，我们可以将其封装在 action 中，然后在组件中通过 useStore 的 dispatch 方法来触发这些 action，在一个用户登录的场景中，我们可以在 action 中处理网络请求、存储用户信息等一系列操作。

注意事项

1. 响应式问题

   在 Vue 3 中，通过 `useStore` 获取的 `store.state` 中的状态默认是响应式的，如果你的状态是一个对象或数组，并且你对其进行了直接的属性修改（而不是通过 mutation），可能会导致响应式失效，一定要遵循 Vuex 的规则，通过 mutation 来修改状态。

2. 组件卸载时的清理

   虽然 Vuex 的 store 是全局单例的，一般不需要手动清理，但如果你的组件中订阅了一些 store 中的状态变化（例如通过 watch 监听 `store.state` 中的某个值），在组件卸载时，要记得取消这些订阅,以防止内存泄漏。

useStore 是 Vue 3 中与 Vuex 交互的重要工具，通过正确的使用步骤、了解其适用场景和注意事项，我们可以更好地利用 Vuex 进行状态管理，提升我们 Vue 项目的开发效率和代码的可维护性，希望这篇文章能帮助你更好地掌握 useStore 的用法。