在现代前端开发中，状态管理是一个重要且不可或缺的部分。
尤其在使用 Vue 3 的项目中，状态管理更是提升开发效率和代码质量的关键所在。
随着 Vue 3 的 <script setup> 语法的引入，开发者能够以更加简洁和直观的方式编写组件。
然而，如何在 <script setup> 中优雅地定义和使用全局状态管理，仍然是许多开发者面临的挑战。
在这篇文章中，我将详细介绍如何在 Vue 3 的 <script setup> 中优雅地定义和使用全局状态管理，并提供完整的代码示例和相关图片链接。
全局状态管理的必要性
在构建复杂的单页应用程序 (SPA) 时，组件之间的数据共享和状态同步是必不可少的。
如果没有一个有效的状态管理方案，很容易导致数据不一致和状态混乱的问题。
Vue 3 提供了一个官方的状态管理库——Vuex，用于管理应用程序的全局状态。
然而，随着 Vue 3 组合式 API 的引入，开发者也可以使用更加轻量和灵活的方式来管理状态，比如使用 reactive 和 ref 组合函数。
搭建步骤
第一步：创建 Vue 3 项目
首先，我们需要创建一个 Vue 3 项目。如果你还没有安装 Vue CLI，可以通过以下命令进行安装：
npm install -g @vue/cli
安装完成后，创建一个新的 Vue 项目：
vue create vue-global-state
在创建项目的过程中，选择 Vue 3 版本，并根据自己的需要选择其他配置选项。
第二步：安装必要的依赖
在项目创建完成后，我们需要安装 Vuex 用于全局状态管理：
npm install vuex@next
第三步：创建 Vuex Store
在 src 目录下创建一个 store 目录，并在其中创建一个 index.js 文件，用于定义我们的 Vuex Store。
// src/store/index.js import{ createStore }from'vuex' const store =createStore({ state(){ return{ count:0 } }, mutations:{ increment(state){ state.count++ } }, actions:{ increment({ commit }){ commit('increment') } }, getters:{ doubleCount(state){ return state.count*2 } } }) exportdefault store
第四步：在项目中注册 Vuex Store
接下来，我们需要在项目中注册 Vuex Store。
打开 src/main.js 文件，并进行如下修改：
// src/main.js import{ createApp }from'vue' importAppfrom'./App.vue' import store from'./store' const app =createApp(App) app.use(store) app.mount('#app')
第五步：在 <script setup> 中使用 Vuex Store
现在，我们可以在 <script setup> 中使用 Vuex Store 了。
首先，创建一个新的组件 Counter.vue，并在其中定义和使用全局状态。
<!-- src/components/Counter.vue --> <template> <div> <p>Count: {{ count }}</p> <p>Double Count: {{ doubleCount }}</p> <button @click="increment">Increment</button> </div> </template> <script setup> import { computed }from'vue' import{ useStore }from'vuex' const store =useStore() const count =computed(() => store.state.count) const doubleCount =computed(() => store.getters.doubleCount) constincrement=()=>{ store.dispatch('increment') } </script>
在这个示例中，我们使用 useStore 钩子函数来获取 Vuex Store 实例，并使用 computed 计算属性来读取和计算状态值。
同时，通过定义 increment 函数并绑定到按钮的点击事件上，我们可以触发 Vuex Store 中的 increment 动作。
第六步：在 App 组件中使用 Counter 组件
最后，我们在 App.vue 中使用 Counter 组件。
<!-- src/App.vue --> <template> <div id="app"> <Counter /> </div> </template> <script setup> import Counter from './components/Counter.vue' </script>
至此，我们已经完成了在 <script setup> 中定义和使用全局状态管理的基本流程。
扩展：使用 Composition API 定义全局状态
除了使用 Vuex 之外，我们还可以通过 Composition API 来定义和管理全局状态。
这种方式更加轻量和灵活，适用于中小型项目。在这个部分，我将介绍如何使用 reactive 和 provide/inject 组合函数来实现全局状态管理。
定义全局状态
首先，在 src 目录下创建一个 store 目录，并在其中创建一个 globalState.js 文件，用于定义我们的全局状态。
// src/store/globalState.js import{ reactive, provide, inject }from'vue' const stateSymbol =Symbol() exportfunctioncreateGlobalState(){ const state =reactive({ count:0 }) functionincrement(){ state.count++ } provide(stateSymbol,{ state, increment }) } exportfunctionuseGlobalState(){ const globalState =inject(stateSymbol) if(!globalState){ thrownewError('Global state is not provided') } return globalState }
注册全局状态
接下来，我们需要在根组件中注册全局状态。
打开 src/App.vue 文件，并进行如下修改：
<!-- src/App.vue --> <template> <div id="app"> <Counter /> </div> </template> <script setup> import { createGlobalState } from './store/globalState' import Counter from './components/Counter.vue' createGlobalState() </script>
使用全局状态
现在，我们可以在组件中使用全局状态了。
打开 Counter.vue 文件，并进行如下修改：
<!-- src/components/Counter.vue --> <template> <div> <p>Count: {{ state.count }}</p> <button @click="increment">Increment</button> </div> </template> <script setup> import { useGlobalState } from '../store/globalState' const { state, increment } = useGlobalState() </script>
通过这种方式，我们可以使用 Composition API 来定义和管理全局状态。
这种方式的优点是更加轻量和灵活，缺点是缺少 Vuex 提供的开发工具和插件支持。
结论
在这篇文章中，我详细介绍了如何在 Vue 3 的 <script setup> 中优雅地定义和使用全局状态管理。
无论是通过 Vuex 还是 Composition API，都是实现全局状态管理的有效方案。
根据项目的规模和需求，可以选择适合的方式来管理全局状态。
希望这篇文章对你有所帮助，并且能够在实际项目中应用这些技巧。
