Vuex简单了解

Vuex

1. Vuex基本了解

   —Vuex是一个专门为Vue.js应用程序开发的状态管理模式；它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化；

   —状态管理模式，集中式存储管理可以看作为把多个需要的组件共享的变量全部存储在一个对象里面；然后将这个对象放在顶层的Vue实例中，让其他组件可以使用；

   —简单来说就是Vuex为全局单例模式，大管家，多个视图都依赖同一状态，我们可以将共享的状态抽取出来，交给大管家统一管理，之后每个视图按照一定规则进行访问和修改等操作；

   —Vuex插件可以实现共享变量的响应式；

   —在大项目中，多个页面共享问题，比如用户登录、用户头像、名称和地理位置信息等，这些状态信息需要放在统一的地方，对其进行保存和管理，并且它还是响应式的；

   —安装插件：npm install vuex --save

   —在开发项目中，可以创建一个store文件夹进行保存vuex下的代码管理；

   基本流程

   —安装插件：

   Vue.use(Vuex)

   —创建插件对象

   const store = new Vuex.store({sate:{},mutations:{},actions:{},getters:{},modules:{}})

2. 单页面状态管理

   —单页面状态管理中主要是三部分，State状态变量、View视图、Actions行为形成的闭环调控；

   —当页面中State发生变化时，会在视图上展现出页面状态，而视图下的行为响应操作（点击事件），又会响应到状态变量中，修改状态变量值；三者形成一个闭环响应管理；

   —如果在开发过程中多个状态信息时保存在多个Store对象中的，各个信息之间相互独立无共享，对之后的管理和维护存在一定的困难；Vuex使用单一状态树来管理应用层级的全部状态，它可以能够让我们最直接的方式找到某个状态的片段，在之后的调试维护等十分方便；

3. Vue五大核心

   —vuex插件对象中放置的属性是固定的，分别表示：

   （1）state：表示共享状态，这些状态是响应式的，当state中的数据发生改变时，Vue组件会自动更新；使用共享对象状态：$store.state.conuter；

   ​ —单一状态树：如果状态信息保存到多个Store对象中，之后的维护和管理等会变得特别困难，所以可以使用单一状态树来管理应用层级的全部状态；单一状态树可以让我们最直接的方式找到某个状态的片段，而且之后的维护和调试非常方便；

   ​ —state对象中每个属性都对应着一个Dep，Dep中存放多个Watcher用来监听属性值的变化，当属性发生变化时，会通知所有界面中用到该属性的地方，让界面刷新；

   （2）mutation：可以定义方法，方法中会默认传入一个参数state，这里的参数对应的就是state中存储的数据；在.vue中调用方法：this.$store.commit('方法名')；

   ​ —注意！！Vue中store状态的唯一更新方式：提交Mutation；因为Vue官方提供Devtools插件工具，可以实时监测跟踪状态改变记录；

   ​ —Mutation中主要包括两部分：字符串的事件类型(type)和回调函数(handler)，该回调函数的第一个参数为state；

   ​ —在通过mutation进行更新数据时，可以额外携带一些参数，这些参数被称为mutation的载荷(PayLoad)；如果需要传递多个参数，通常会以对象的形式进行传递，然后在从对象中取出相关属性；

   例如：

   mutations:{
   decrement(state,n){
     state.count += n
   }
   //在vue实例中methods中通过提交实现响应式变化
   //this.$store.commit('decrement',2)
   }
   

   ​ —mutations的提交风格：上面通过commit进行提交是普通方式，其还提供了包含一个type属性的对象，这样就会将整个commit对象作为payload使用；

   ​ —mutation响应规则：

   ​ 一、提前在store中初始化所需要的属性；

   ​ 二、当给state中的对象添加新的属性时，需要使用以下方式：

   ​ （1）方式一：Vue.set(obj,'newProp',123)；响应式删除某个属性：Vue.delete(obj,'Prop')；

   ​ （2）方式二：用新对象旧对象重新赋值；

   ​ —类型常量：可以新建一个.js文件用于保存事件类型，然后导入.js文件中的类型常量，提交过程也需要提交类型常量，这样就可以通过以下方式进行类型引用：['INCREMENT'](state){}

   ​ —同步函数：mutation中的方法必须是同步的，主要原因是devtools可以帮助我们捕捉mutation的快照，但是当异步操作时，devtools就不能很好的追踪整个操作是什么时候会完成；

   （3）getters：类似于组件中computed属性，可以获取state变异以后的状态；在getters中传入方法，方法中也是默认传入一个state参数，同时还会传入getters本身的一个参数，默认是不能传入其他自定义参数，如果要传入参数，需要让getters本身返回另一个函数；

   —例如：

   getters:{
   moreAgestu(state,getters){
   //返回一个函数，可以自定义age的大小
   return age => {
       //获取年龄大于20的学生
   	  return state.students.filter(s => s.age > age)
     	  //获取年龄大于20的学生的数量
     	  return getters.moreAgestu.length
     }
   }
   }
   

   （4）action：类似于mutations，用来替代mutation进行异步操作的；

   当发送网络请求的时候会进行异步操作，这里有一个Backend API，向后端请求API，发生异步操作，因此会在action中进行操作；

   —action会默认传入一个参数context上下文对象；

   —调用方法，一定需要经过mutation进行state的改变：

   action:{
   aUpdateInfo(context,payload){
     //可以通过一个Promise对象进行异步处理
     return new Promise((resolve,reject) => {
       setTimeout(()=>{
           context.commit('updateInfo')
           console.log(payload)
           resolve()
     	},1000) 
     })       
   }
   

   在Vue组件中使用：

   updateInfo(){
   	this.$store.dispatch('aUpdateInfo','我是payload').then(res => {
   	console.log(res)
   })
   }
   

   （5）modules

   —Vue使用单一状态树，意味着很多状态会交给Vuex进行管理，当应用变得复杂时，store对象可能会变得臃肿；因此Vuex可以允许将store分割成模块，每个模块都有自己的state、mutations、actions和getters；

   例如：

   const moduleA = {
    state:{},
    mutations:{},
    actions:{},
    getters:{}
   }
   const store = new Vuex.Store({
    modules:{
        a:moduleA
    }
   })
   

   —模块中的getters可以传入三个参数，当前模块的state，当前getters和总的rootState；

   —模块中的actions只能访问自己模块里面的mutations方法；

   —Devtools是Vue开发的一个浏览器插件，可以记录state状态，当多个页面进行state修改时，可以进行跟踪；因此要修改state一定要通过mutation进行修改，否则devtools无法进行跟踪记录每一步的状态；

   —mutation中一般都是跟踪处理同步操作，一旦有异步操作（网络请求，Backend API），需要经过action，然后再进入mutation进行处理；

   store文件夹的目录

   —可以将store对象中的五大核心进行抽离，分别抽离成action.js、mutations.js、getters.js和module文件夹用于存放多个module；

   —state状态一般不用于抽离，直接放在index.js中；