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)
    }
})



複製代碼