---

一、介绍

• Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库
• 当我们的应用遇到多个组件共享状态（共享状态：多个组件维护1个变量）时，单向数据流的简洁性很容易被破坏。多个组件互相传参将会非常繁琐，并且对于兄弟组件间的状态传递无能为力
• vuex就是把多个组件共享状态（数据）抽取出来以一个全局单例模式管理，把共享的数据函数放进vuex中，任何组件都能获取状态或者触发行为

二、install

npm install vuex@next --save

三、store

1、介绍

• 每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：
  1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新
  2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation

2、创建并全局引入

• 创建src/store/index.js

• main.js中全局注册

// 引入创建的store/index.js
import store from './store'// store注入到vue根实例
createApp(App).use(store)

3、单一状态树

1. index.js

import {createStore} from 'vuex'export default createStore({// 1、共享的状态（数据），相似于datastate: () => ({user: {name: 'kimi',age: 18,honor: ['1-三好学生','1-优秀班干部','2-优秀班干部']}}),// 2、有时候我们需要从 state 中派生出一些状态，如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它，无论哪种方式都不是很理想// 只能读取state中的状态getters: {/*** 使用state - 获取个人荣誉的数量** @param state 上面的state* @returns*/getUserHonorNum(state) {return state.user.honor.length},/*** 使用getters** @param state* @param getters* @returns*/getUserAvgHonorNum(state, getters) {return getters.getUserHonorNum / 3},/*** 传入自定义参数** @param state* @param getters* @returns*/getUserAvgHonorNumber: (state, getters) => (year) => {return getters.getUserHonorNum / year}},// 3、更改 Vuex 的 store 中的状态（数据）的唯一方法是提交 mutation// mutation中必须是同步函数mutations: {/*** 使用state - 年龄+1** @param state