三十八、Vuex简介

（一）理解 Vuex

1.Vuex 是什么

• 专门在 Vue 中实现 集中式状态（数据）管理 的一个 Vue 插件
  • 集中式：类似于一名老师给一个班级的学生上课，老师只讲一遍，但是有一群学生的思维在接收
  • 分布式：与集中式相对
• 对 Vue 应用中多个组件的 共享状态 进行集中式的管理（读/写）
• 也是一种组件间通信的方式，且适用于任意组件间通信

2.GitHub 地址

• https://github.com/vuejs/vuex

3.什么时候使用 Vuex

• 多个组件需要共享数据时使用
• 多个组件依赖于同一状态
• 来自不同组件的行为需要变更同一状态

（二）Vuex 工作原理

• API 由 Store 统一管理

（三）搭建 Vuex 环境

1.安装

• 在 2022 年 02 月 07 日，Vue3 成为了默认版本
  • 即 npm i vue 直接安装的是 Vue3
• 同时 Vuex 也更新到了 v4
  • 即 npm i vuex 安装的是 Vuex4
• Vuex4 只能在 Vue3 中使用
• Vue2 项目需要安装 Vuex3

npm i vuex@3

2.创建配置文件

// src/store/index.js
// 引入Vue核心库
import Vue from "vue";
// 引入Vuex
import Vuex from "vuex";
// 使用Vuex插件
Vue.use(Vuex);

// 准备Actions对象——用于响应组件中用户的动作
const actions = {};
// 准备Mutations对象——用于操作state中的数据
const mutations = {};
// 准备State对象——用于存储具体的数据
const state = {};

// 创建并暴露Store
export default new Vuex.Store({
  actions,
  mutations,
  state,
});

3.创建 vm 时传入 store 配置项

// main.js
......
// 引入Store
import store from './store';
......

// 创建Vue实例对象---vm
new Vue({
  render: h => h(App),
  store
}).$mount('#app');