1 # 一、理解vuex
2 1.概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读写），也是一种组件间通信的方式，且适用于任意组件间通信。
3 2.Github地址：https://github.com/vuejs/vuex
4 # 二、什么时候使用Vuex
5 1.多个组件依赖同一状态
6 2.来自不同组件的行为需要变更同一状态
7 # 三、安装： npm i vuex@3
8 vuex@3 对应的 vue2
9 vuex@4 对应的 vue3
10 # 四、搭建vuex环境
11 // 该文件用于创建Vuex中最为核心的store，路劲(一般都放这里)：src/store/index.js
12 // 引入Vuex
13 import Vue from 'vue'
14 import Vuex from 'vuex'
15
16 // 引入插件
17 Vue.use(Vuex);
18
19 // 准备actions，用于响应组件中的动作
20 const actions = {
21 jia(miniStore, value){
22 miniStore.commit('JIA', value)
23 },
24 jian(miniStore, value){
25 miniStore.commit('JIAN', value)
26 },
27 jiaOdd(miniStore, value){
28 if (miniStore.state.sum % 2){
29 miniStore.commit('JIA', value)
30 }
31 },
32 jiaWait(miniStore, value){
33 setTimeout(()=>{
34 miniStore.commit('JIA', value)
35 }, 500);
36 }
37 }
38 // 准备mutation，用于操作数据（state）
39 const mutations = {
40 JIA(context, value) {
41 context.sum += value;
42 },
43 JIAN(context, value) {
44 context.sum -= value;
45 },
46 }
47 // 准备state，用于存储数据
48 const state = {
49 sum: 0,
50 }
51
52
53 // 创建并暴露store
54 export default new Vuex.Store({
55 actions,
56 mutations,
57 state
58 });
59 # 组件部分代码
60
75
118
123
124
125 # 1.组件中渡漆vuex中的数据：$store.state.sum
126 # 2.组件中修改vuex中的数据： $store.dispatch('actions中的方法名', data) 或 $store.commit('mutations中的方法名', data)
127 # 备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，不写dispatch，直接写commit