vuex中actions和mutation有什么區別

這篇文章給大家分享的是有關vuex中actions和mutation有什么區別的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

vuex說明：

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。

包含的內容：

• state：驅動應用的數據源；

• view:以生命方式將state映射到視圖；

• actions:響應在view上的用戶輸入導致的狀態變化；

流程示意圖

但是，當我們的應用遇到多個組件共享狀態時，單向數據流的簡潔性很容易被破壞：

多個視圖依賴于同一狀態。

來自不同視圖的行為需要變更同一狀態。

對于問題一，傳參的方法對于多層嵌套的組件將會非常繁瑣，并且對于兄弟組件間的狀態傳遞無能為力。

對于問題二，我們經常會采用父子組件直接引用或者通過事件來變更和同步狀態的多份拷貝。以上的這些模式非常脆弱，通常會導致無法維護的代碼。

因此，我們為什么不把組件的共享狀態抽取出來，以一個全局單例模式管理呢？在這種模式下，我們的組件樹構成了一個巨大的“視圖”，不管在樹的哪個位置，任何組件都能獲取狀態或者觸發行為！

另外，通過定義和隔離狀態管理中的各種概念并強制遵守一定的規則，我們的代碼將會變得更結構化且易維護。

適用于型單頁應用

安裝vuex

npm i vuex

新建文件夾store,建議目錄

Actions 和 mutation

mutation：（必須是同步函數）

更改store中state值的唯一方法就是提交mutation，每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。這個回調函數就是我們實際進行狀態更改的地方，并且它會接受 state 作為第一個參數：

 mutations: {
  addNum(state) { 
   state.num ++
  }
}

你可以向 store.commit 傳入額外的參數，即 mutation 的 載荷（payload）：在大多數情況下，載荷應該是一個對象，這樣可以包含多個字段并且記錄的 mutation 會更易讀：

 mutations: {
  addNum(state,Payload) { 
   state.num +=Payload.amount
  }
}

不能直接調用一個 mutation handler。這個選項更像是事件注冊：“當觸發一個類型為 increment 的 mutation 時，調用此函數?！币獑拘岩粋€ mutation handler，你需要以相應的 type 調用 store.commit 方法：

//頁面中的操作(一、不帶參數)
 methods:{
  add(){
   this.$store.commit('addNum')
  }
 }
//二、帶參數的情況下
data(){
argument:{
 amount:10
},
methods:{
  add(){
   this.$store.commit('addNum',this.arguments)
  }
 }

actions

Action 類似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接變更狀態。

• Action 可以包含任意異步操作。

 mutations: {
  addNum(state,amount) {
   state.num +=amount
  },
  someMutation(state) {
   setTimeout(()=>{
     state.count--
   },1000)
  }
 },
 actions: {
  increment (context,args) {
      context.commit('addNum',args)
  }
 },
//另一種寫法
 actions: {
  increment ({commit},args) {
      commit('addNum',args)
  }
 }

Action 函數接受一個與 store 實例具有相同方法和屬性的 context 對象，因此你可以調用 context.commit 提交一個 mutation，或者通過 context.state 和 context.getters 來獲取 state 和 getters

分發Action

//頁面中
methods:{
  add(){
   this.$store.dispatch('increment',this.pa.amount)
  }
 },

區別：

action和mutation都可以改變state中數據的狀態，但是action可以處理異步函數可以在devtool中追蹤數據變化，而mutation只可以處理同步函數，當處理異步函數的時候檢測不到數據變化；

mutation 處理同步異步

 mutations: {
//同步
  addNum(state,amount) {
   state.num +=amount
  },
//異步
  someMutation(state) {
   setTimeout(()=>{
     state.count--
   },1000)
  }
 }

頁面中操作

<template>
<div>
   <p @click="add">同步{{num}}</p>
  <p @click="reduce">異步{{count}}</p>
</div>
</template>
 methods:{
  //同步
  add(){
   this.$store.commit('increment',this.pa.amount)
  },
//異步
  reduce(){
   this.$store.commit('someMutation')
  }
 }

數據變化之前,瀏覽器中顯示,devtool中的數據狀態

當頁面中的數據改變之后，追蹤數據

action 處理同步異步

 mutations: {
  addNum(state, amount) {
   state.num += amount
  },
  someMutation(state) {
    state.count-- 
  }
 },
 actions: {
  increment({commit}, args) {
   commit('addNum', args)
  },
  actionSomemution(context) {
   setTimeout(() => {
     context.commit('someMutation') 
   }, 1000)
  }
 }

頁面中

methods:{
  add(){
   this.$store.dispatch('increment',this.pa.amount)
  },
  reduce(){
   this.$store.dispatch('actionSomemution')
  }
 },

數據變化之前，瀏覽器中顯示，與devtool中數據顯示

操作之后數據變化，

感謝各位的閱讀！關于“vuex中actions和mutation有什么區別”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！