Vue3 + TS + Vite + AntdUI 搭建后台基础模板：状态管理 Vuex

2023-10-19 08:48:38

前言

在构建后台管理系统时，状态管理是至关重要的。Vuex 是 Vue 生态系统中备受推崇的状态管理库，它提供了一种集中化管理应用程序状态的方式，便于开发和维护复杂应用程序。本文将深入探讨如何在 Vue3、TypeScript、Vite 和 AntdUI 的组合环境中使用 Vuex 来构建后台基础模板。

为什么使用 Vuex？

Vuex 提供了以下优势：

单一的事实来源： Vuex 存储了应用程序的唯一状态，确保了数据一致性和可靠性。
模块化： Vuex 模块化设计使您可以轻松组织和管理大型应用程序的状态。
响应性： Vuex 监听状态变化并自动更新组件，从而简化了响应式编程。
调试方便： Vuex 提供了出色的调试工具，可以轻松跟踪和理解应用程序状态。

安装和设置

要安装 Vuex，请在您的终端中运行以下命令：

npm install vuex

然后，在您的 main.ts 文件中导入 Vuex：

import { createApp } from 'vue'
import { createStore } from 'vuex'
import App from './App.vue'

const store = createStore({})

const app = createApp(App)
app.use(store)
app.mount('#app')

创建 Store

让我们创建一个简单的 Vuex 存储，它将包含一个名为 count 的状态：

// store.ts

import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
})

state： 存储应用程序数据的状态对象。
mutations： 用于修改状态的提交操作。
actions： 用于执行异步操作或复杂逻辑。
getters： 用于计算衍生状态。

使用 Vuex

在组件中使用 Vuex，可以使用 useStore 钩子：

<script setup>
import { useStore } from 'vuex'

const store = useStore()
</script>

然后，您可以使用 store 对象访问状态、提交 mutations 和分派 actions：

<template>
  <div>Count: {{ store.state.count }}</div>
  <button @click="store.commit('increment')">Increment</button>
</template>

加载中状态

在后台管理系统中，经常会遇到需要显示加载状态的情况，例如在请求数据或执行异步操作时。Vuex 提供了一种方便的方法来管理加载状态。

在 store 中创建一个 loading 状态：

// store.ts

export default createStore({
  state: {
    loading: false
  },
  mutations: {
    setLoading (state, loading) {
      state.loading = loading
    }
  }
})

在组件中，可以使用 computed 属性根据 loading 状态显示加载指示符：

<template>
  <div v-if="loading">加载中...</div>
  <div v-else>内容</div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'

const store = useStore()

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