浅谈Vuex.

一、什么是Vuex？

　　公共状态（公用的一些属性）管理，还可以解决组件传值的一些复杂问题。例：地理定位

　　1只有各个组件公用的一些数据会放在Vuex当中。 但并不是所有的公用的数据都要放在Vuex中。

　　2 Vuex是一个公共状态管理模式，并不是数据库，所以不可能持久保存一些数据，当用户刷新浏览器的时候那么数据就有可能消失。

　　3 Vuex主要应用在大型的单页面开发中

二、Vuex数据传递的流程：

 

　　1通过new Vuex.Store()创建一个store仓库，因为将store挂载在了vue的实例身上，所以this中就有store

　　2 在组件内部通过this.$store.state.属性   来调用公共状态中的state，state是存储公共的状态

　　3 当组件需要修改数据的时候，必须遵循单向数据流，通过this.$store.dispatch来触发actions中的方法，直接写函数名就可以了。；

　　4当触发之后， actions（配置项中都是函数）中的每个方法都会接收一个对象（参数），这个对象里面有一个commit方法，作用就是用来触发mutations里面的方法。

　　5 mutations里面的方法用来修改state中的数据，mutations里面的方法都会接受到2个参数，一个是store中的state，另一个是需要传递的参数。

　　6 当mutations中的方法执行完毕后state会发生改变 ，因为vuex的数据是响应式的，所以组件的状态也会发生改变

 

三、Vuex中5个属性的作用：

　　1state：

　　用来存储公共的状态，在state中的数据都是响应式的。

　　辅助函数：mapState;

　　在computed属性中来jieshoustate中的数据；将组件中的9分

　　computed:Vue.mapState(["属性"]) computed:Vuex.mapState({    key:state=>state.inputeVal })

　　如果自身组件也需要使用computed的话：

　　computed:{    ...Vuex.mapState({    key:state=>state.inputeVal    }) }    

 

　　2 actions：

　　actions里面的函数主要用来处理异步的函数以及一些业务逻辑，每一个函数里面都有一个形参，这个形参是一个对象，里面有一个commit方法，这个方法用来触发mutations里面的方法。

　　辅助函数：mapActions

　　只能在methods中使用；

　　methods:Vuex.mapActions(["属性名"]); methods:Vuex.mapActions({    自定义名:"函数",    自定义名:"函数"    })

　　3 mutations：

　　mutations里面的函数主要用来修改state中的数据，mutations里面的所有方法都会有2个参数，一个是store中的state，另外一个是需要传递的参数。

　　辅助函数：mapMutations

 

　　4 getters：

　　相当于组件中的computed，计算属性，同时也是监听属性的变化，当state中的属性发生改变的时候，就会触发getters里面的方法，getters里面的每一个方法中都会有一个参数state。

　　使用方式：

　　this.$store.getters.方法名称..不加括号；

　　辅助函数：mapGetters

　　mapGetters使用在组件的computed中

　　Vue.mapGetters(["方法名称"]) Vuex.mapGetters({    key:val      //val就是getters中的函数名称 })

　　5 modules  模块

　　将公共的状态按照模块进行划分

　　1每个模块都相当于一个小型的Vuex

　　2每个模块里面都会有state getters actions mutations

　　3在导出模块的时候添加一个 namespaced : true

 　　主要作用就是让自己的当前子一个模块都有自己的独立的空间。

 

　　如何使用辅助函数：

　　1在当前组件中首先需要引入vuex；import Vuex from "vuex"

　　2通过Vuex来调用辅助函数；