vue3 使用＜script setup＞中优雅地定义和使用全局状态管理

<script setup>

<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的 <script> 语法，它具有更多优势：

• 更少的样板内容，更简洁的代码。
• 能够使用纯 TypeScript 声明 props 和自定义事件。
• 更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。
• 更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。

全局状态管理的必要性

在构建复杂的单页应用程序 (SPA) 时，组件之间的数据共享和状态同步是必不可少的。

如果没有一个有效的状态管理方案，很容易导致数据不一致和状态混乱的问题。

Vue 3 提供了一个官方的状态管理库——Vuex，用于管理应用程序的全局状态。

然而，随着 Vue 3 组合式 API 的引入，开发者也可以使用更加轻量和灵活的方式来管理状态，比如使用 reactive 和 ref 组合函数。

vue3项目搭建

第一步：创建 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，都是实现全局状态管理的有效方案。

根据项目的规模和需求，可以选择适合的方式来管理全局状态。

希望这篇文章对你有所帮助，并且能够在实际项目中应用这些技巧。