Vuex概述

Posted 2021-03-12 zhaohui-116

 1 /**
 2  * Vuex

 3  *  为了保存在组件之间共享数据而诞生，如果组件之间有共享的数据，可以直接挂载到 vuex 中
 4  *    而不必通过父子组件之间传值了，如果组件的数据不需要共享，此时这些不需要共享的私有数据不需要存放到Vuex中
 5  *
 6  *    只有共享的数据，才有权利放到 vuex 中
 7  *    组件内部私有的数据，只要放到组件的 data 中即可
 8  *
 9  *    props：父组件传递过来的数据
10  *    data：组件内部私有数据
11  *    vuex：组件间共享数据
12  *
13  *    结论：vuex 是一个全局的共享数据存储区域，就相当于一个数据的仓库
14  *
15  *    1.安装：npm install vuex --save
16  *    2.引入：import vuex from ‘vuex‘
17  *    3.配置：Vue.use(vuex)
18  *    4.创建一个实例(数据存储对象）：
19  *
20  *    const store = new Vuex.Store({
21  *
22  *        state:{
23  *
24  *            想象成组件中的 data 专门用来存储数据
25  *
26  *              如果在组件中想要访问 store 中的数据，只要通过 this.$store.state.***来访问
27  *
28  *        },
29  *
30  *        mutations:{
31  *
32  *            注意：如果要操作 store 中的 state 值，只能通过调用 mutations 提供的方法，才能操作对应的数据
33  *
34  *              不推荐直接操作 state 中的数据，因为万一导致了数据的紊乱，不能快速定位到错误的原因
35  *
36  *                mutations 中的方法，在组件中通过 this.$store.commit(‘方法名‘，参数)来调用
37  *
38  *                mutations 的函数参数列表中，最多支持两个参数：
39  *
40  *                  参数1：是 state 状态
41  *
42  *                  参数2：通过 commit 提交过来的参数
43  *        },
44  *
45  *        getters:{
46  *
47  *            注意：这里的 getters 只负责对外提供数据，不负责修改数据
48  *
49  *              如果想要修改 state 中的数据，去 mutations 中
50  *
51  *              如果store 中 state 上的数据，在对外提供的时候，需要一层包装，那么
52  *
53  *                推荐使用 getters
54  *
55  *                 this.$store.getters.***
56  *        }
57  *
58  *    })
59  *
60  *    5.将 vuex 创建的 store 挂载到 vm 实例上，只要挂载到vm上，如何组件都能通过store 来存取数据
61  */