要使用 Vuex，这是一个用于 Vue.js 应用程序的状态管理库，您需要安装它并将其集成到您的 Vue 项目中。以下是安装和使用 Vuex 的步骤：
- 安装 Vuex：
您可以使用 npm 或 yarn 安装 Vuex。打开您项目的终端并运行以下命令：
使用 npm：
npm install vuex使用 yarn：
yarn add vuex- 创建 Vuex 存储：
在您的 Vue 项目中，您需要创建一个 Vuex 存储以管理应用程序的状态。您可以通过创建一个 JavaScript 文件来实现这一点。我们将其命名为store.js：
import { createStore } from 'vuex';
const store = createStore({
state: {
// 在这里定义应用程序的状态
},
mutations: {
// 在这里定义用于修改状态的函数
},
actions: {
// 在这里定义异步操作
},
getters: {
// 在这里定义计算属性
},
});
export default store;在上面的代码中，您定义了存储的初始状态、mutations（用于修改状态的函数）、actions（异步操作）和getters（计算属性）。
- 将 Vuex 集成到您的 Vue 应用程序中：
打开您的主应用程序文件（通常是main.js或main.ts），并将 Vuex 存储集成到其中：
import { createApp } from 'vue';
import App from './App.vue';
import store from './store'; // 导入您的 Vuex 存储
const app = createApp(App);
app.use(store); // 使用 Vuex 存储
app.mount('#app');这段代码导入存储并将其集成到您的 Vue 应用程序中。
- 使用状态、Mutations、Actions 和 Getters：
在您的 Vue 组件中，您可以使用 Vuex 存储来访问和操作应用程序的状态。以下是如何在组件中使用它的示例：
<template>
<div>
<p>计数器：{{ $store.state.counter }}</p>
<button @click="incrementCounter">增加</button>
</div>
</template>
<script>
export default {
methods: {
incrementCounter() {
this.$store.commit('increment'); // 提交一个 mutation
},
},
};
</script>在组件中，您可以使用 $store.state 访问状态，并使用 $store.commit 提交 mutations。您还可以使用 $store.dispatch 调度 actions 并使用 $store.getters 使用 getters。
- 在模板中访问状态：
您可以在模板中使用双花括号（{{ }}）直接访问状态属性。在上面的示例中，我们从状态中访问了counter。
这是在 Vue 3 应用程序中安装和使用 Vuex 的基本概述。Vuex 提供了一个集中式的状态管理解决方案，您可以根据应用程序的需求添加更多 mutations、actions 和 getters。