7.（vue3.x+vite）组件间通信方式之vuex

前端技术社区总目录（订阅之前请先查看该博客）

示例效果：

Vuex 简介

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。
（1）Vuex 的状态存储是响应式的。
（2）改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。
主要包括以下几个模块：
State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
Getter：允许组件从 Store 中获取数据，比如数组长度等。
Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

1：安装Vuex：