Vuex操做实录

Vuex核心概念

• 统一整个vue须要不停交互的数据，在父子关系相对复杂的状况下，方便清晰的操做各种数据，而不须要反复的进行父子组件传值等操做，并清晰的能够看到各种数据的走向,为此使用vuex时有如下要点

关键提要

1. 操做数据时，不管是同步仍是异步，最终仍是经过commit一个Muations来完成整个数据的走向，经过mapActions或者this.$store.dispatch的操做结果仍以Mutaions结尾。
2. 与后端交互时，vuex的数据优化就在于不要过分渲染DOM节点，建议接口成功后让后端返回当前修改为功的单条数据操做结果，前端替换数据后，经过设置setter替换当前已缓存vuex的getter(也就是vuex中computed属性)。

state

• 整个仓库存放数据所在，在vuex中不容许直接修改state，须要经过显式的经过操做this.$store.commint提交到mutaion，或者借由Action再提交到mutaion里定义的某一函数才能够成功

// store.js
new Vuex.Store({
  state: {
    count:0,
    roles:[],
    userInfo:{}
  },
  mutations: {
    addCount(state){
      state.count++;
    }
  },  
  actions: {
  },
  modules: {
  }
})
 //a.vue
 addCount(){
     this.$store.commit('addCount')
 }
复制代码

mapState

• 快速设置将state里的属性设置为Vue里的commputed函数，会更好看点(嗯。。就是好看点)

//原来的提交
computed:{
    a(){
        return  1
    }
    b(){
        return 2
    }
}
//Vuex写法
import  mapState from 'vuex'
//经过对象扩展符，支持vuex内的state映射返回，也能够支持原来的提交方式,若是当前页面没有额外缓存，仅仅只有vuex的数据变更
computed:mapState({
    count:state=>state.count++;
})
//若是须要混入,写法以下，count的前置逻辑在vuex的getter中写好，最后映射到组件中，而a函数则能够就在函数内写好
computed:{
    ...mapState({
        count:state=>state.count++
    }),
    a(){
        return 1
    }
}
复制代码

Geeter(vuex里的计算属性)

• 若是多个组件相互依赖同一个数据，如用户信息，可在vuex中经过geeters对象缓存起来,

1. getters里的函数支持两个参数，第一个为store的state对象，还有一个是getters自己，方便多个缓存数据交互变化

new Vuex.Store({
  state: {
    count:0,
    roles:[],
    userInfo:{}
  },
  mutations: {
    addCount(state){
      state.count++;
    }
  },  
  getters:{
      userInfo:state=>state,
      count:(state,getters)=>{
         console.log(state) // state自己
         console.log(getters.userInfo)  //其余的缓存属性
     }
   }
})
复制代码

mapGetters辅助函数

• 只须要传入getters里的缓存的key，仅仅只是store的getter属性的一个映射

<template>
    <span>{{count}}</span>
</template>
import {mapGetters} from 'vuex'

computed:{
   ...mapGetters([
     'userInfo',
     'count'
   ']) } 复制代码

Mutation(同步注册事件)

• Mutation对象里的函数支持两个参数，第一个参数state为store里的数据, 第二个参数本身想要传入的数据，在提交事件的时候能够传入,传入对象则方便多个参数
• Mutation为同步提交，若是是ajax请求，则先在axios回调完成后，在then函数调用commit，否则会致使顺序问题，数据没法刷新，或者ajax放在vuex的action里，完成后再触发Muation

//a.vue
    a(){
        this.$store.commit('addCount',{
            num:4
        })
    }
 //store

new Vuex.Store({
  state: {
    count:0,
    roles:[],
    userInfo:{}
  },
  mutations: {
    addCount(state,param){
        console.log(state)  //为state对象
        console.log(param.num) //  为comit传入的参数 
      state.count++;
    }
  },  
})
复制代码

Action(异步处理后提交Muation)

• 核心仍是为了提交mutaions，只不过大部分异步状况处理完成后再commit

1. Actions里的函数接受两个参数，第一个参数是一个与store拥有彻底方法的对象(Getter,Mutaion,state等现有对象，包括还有commit等系列方法) ，第二个参数则是用户自行传入的参数对象

new Vuex.Store({
  state: {
    count:0,
    roles:[],
    userInfo:{}
  },
Mutationos:{
    add(){
            
    }
}
 Actions: {
//可采用对象结构
    addCount({commit,state},{num}){
        console.log(num)  //为外部传入对象
        commit('add')
  },  
})
复制代码

##mapActions

• mapActions提交都是函数因此须要在methods里写入,

1. 使用mapActions，就是将action里的方法名映射到a组件中，而后在须要调用的地方

import mapAction from 'vuex'
//a.vue
methods:{
    ...mapAction[
        'addCount'   //等同于this.$store.dispatch('addCount')
    ],
    form(){
   // 第一种调用vuex里的action方法
     this.addCount()
   //如要携带参数则是
    this.addCount({num:1})
    }
 }
复制代码

多重异步处理

• 可能数据操做须要多个ajax返回后才能确认,结合async await更香(然而我不太喜欢使用。。更爱then catch...)

new Vuex.Store({
  state: {
    count:0,
    roles:[],
    userInfo:{}
  },
Mutationos:{
    add(state,num){
                 console.log(num)
    }
}
 Actions: {
//可采用对象结构
    async addCount({dispatch,state},{num}){
    try{
        const resultNums=await dispatch('shopping',{num:1})
    } catch(err){
        console.log(err)
    }
        
   },  
   async shoppping({commit,dispatch},{num}){
       console.log(num)  // 由resultNums返回的1
        commit('add',num)
    }
})



复制代码