vuex 的学习理解

前言: vuex 就是一个声明数据、添加数据、获取数据、改变数据、的一个过程、解决一个数据在多个组件使用的复杂流程
特点：把数据单独隔离、有自己的生态系统、有固定的输入和输出、处理复杂的数据结构~

一、声明要用的文件、可以根据自己的项目需求定义文件 以下是我用到文件、仅做参考。、
index文件 把所有方法可以集成到这个文件里面 方便其他文件引用。、 Vuex.Store就是将所有的文件里面的数据 注入到store 实例中、

二、先从state状态说起、他和vue 中的data 相似、存储初始化数据、可以设置一个单独的文件夹 也可以在index.js 中直接声明你所需要的数据、

1，上面有把文件注入到store实例中、 在组件中就可以通过this.$store.state.appName 获取到state 中所定义的数据。这是直接通过store 实例去获取数据的一种方式。
2，vuex 提供了组件绑定的辅助函数mapState、

上面有两种通过mapState赋值的方法、对象和数组的方式、如果是模块中的数据怎么获取呢~
3，命名空间 就是用来解决这个问题的、在模块中定义命名空间、写法如下

开启命名空间后、代码的写法就变成了下面传递参数的方式。

4，mapstate,就是一个获取state中数据的辅助函数、
三、getter 的使用、
1，首先先看到官方文档中给的解释： Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像computer计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
2，getters 里面定义的方法接受state 作为第一个参数 这里的state 包括所有的state数据~

state 中appName 就变成了 上面方法中return 之后的数据
3，在组件中拿到在上述 getter中修改后的数据、有两种方法、1,在computed中 用方法接收 return store实例中的数据、2，使用辅助函数mapGetters、mapGetters 获取的字符串 等同于在实例中获取的数据

4、mapGetters、和 mapState 区别就是 mapGetters 不需要使用命名空间、 namespaced 设置为false。
四、mutations 的使用~
1，先看下官方的解释：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：
2，看下 mutations 中声明的方法、

方法中有两个参数、第一个是state 就是同级中的state、可以拿到state 中所有的数据、第二个是载荷（官网的叫法）、在这里可以理解为是一个形参，上面我有一个赋值的操作。先结合项目中如何使用看一个整个流程。
2-1 在项目中真实简单的赋值流程、1. 在state（仓库）中声明一个变量 初始值为空数组

2-2 在 mutation 中声明一个 方法 GETMENULIST 方法里面有一个赋值操作

2-3 可以拿到menu数据组件中 使用这个方法 下图是拿到这个方法 在当前组件中this.GETMENULIST 就能使用

2-4 给方法中第二个参数进行赋值 采用调用接口的方式 获取到菜单数据 之后看2-2的图 然后把拿到的数据赋值到state（仓库）中menuList 可以在任何组件获取到这个数据、

3、定义方法之后的一个使用规则、mutations 也有一个辅助函数mapMutations
还是通过展开符的方式 获取到方法中定义的值、

4，修改statet 中的数据 有以下几种方式、

、使用commit的方法、第一个参数就是 mutations 中定义的方法、第二个就是方法中第二个参数载荷、(实参)、 也就是state改变后的值、
还有在commit中 就是使用对象的方式、type：对应的方法名、appName参数：对应修改后的数据、
、在实例中直接使用这个方法 可以直接写 修改后的参数（实参）、 也可以使用对象的方式 写上参数 和对应的修改后的数据、
5，直接在mutations 文件方法里面 直接修改state 中的数据、

state 中的值 不能直接进行修改、需要提交mutations 进行修改
五、actions 的使用、
可以在组件里面 直接提交mutations进行修改 为什么还需要用actions 呢、 这就考虑到两个使用场景、也就是两者的区别
1，先看看官方的介绍、Action 类似于 mutation，不同在于：
• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作、
• mutation 必须是同步的函数（具体的解释内容可以看下官网）、
2，首先看一下使用流程、先模拟一个接口请求 使用promise 设置appName 的数据

在actions 文件中模拟提交、使用 commit、 commit 有两个参数。
可以直接提交 这个mutations 字符串方法、 还有一个参数 就是成功之后、mutations方法中的数据、 方法中state 的appName 就变成了 模拟接口中的appName、SET_APPNAME 这个mutations 方法中的 appName 就成了 当前提交的appName、也就是所谓的载荷、、

3，actions 也有一个 辅助方法 mapActions 在组件中引入之后、

使用展开符获取到方法之后、就可以在实例中使用了、然后在组件、事件中调用这个方法。 使用store实例中的dispatch、
（this.$store.dispatch(‘updateAppName’) 是不需要使用 mapActions 这个属性就可以进行触发的、 直接使用dispatch 提交一个action

六、vuex 中模块的使用、
1， 使用实例中 registerModule方法 动态注册组件~

总结：通过state 定义初始化数据、上面就是获取数据和修改数据、还有新增数据的方法、全局处理起来更加方便
再看一下 官方中提供的一个图片~

—独立的提供响应式数据、通过vuex 提供的state数据、驱动视图、组件再通过dispatch 派发给actions、再通过commit的形式 提交给mutations、 最后通过mutations 去更改state、然后再更新视图