vuex中actions和mutation有什么區(qū)別

這篇文章給大家分享的是有關(guān)vuex中actions和mutation有什么區(qū)別的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)公司專注于環(huán)翠企業(yè)網(wǎng)站建設(shè),自適應(yīng)網(wǎng)站建設(shè),商城網(wǎng)站定制開發(fā)。環(huán)翠網(wǎng)站建設(shè)公司,為環(huán)翠等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站策劃，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

vuex說明：

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。

包含的內(nèi)容：

• state：驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源；

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

• actions:響應(yīng)在view上的用戶輸入導(dǎo)致的狀態(tài)變化；

流程示意圖

但是，當(dāng)我們的應(yīng)用遇到多個(gè)組件共享狀態(tài)時(shí)，單向數(shù)據(jù)流的簡潔性很容易被破壞：

多個(gè)視圖依賴于同一狀態(tài)。

來自不同視圖的行為需要變更同一狀態(tài)。

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

對于問題二，我們經(jīng)常會(huì)采用父子組件直接引用或者通過事件來變更和同步狀態(tài)的多份拷貝。以上的這些模式非常脆弱，通常會(huì)導(dǎo)致無法維護(hù)的代碼。

因此，我們?yōu)槭裁床话呀M件的共享狀態(tài)抽取出來，以一個(gè)全局單例模式管理呢？在這種模式下，我們的組件樹構(gòu)成了一個(gè)巨大的“視圖”，不管在樹的哪個(gè)位置，任何組件都能獲取狀態(tài)或者觸發(fā)行為！

另外，通過定義和隔離狀態(tài)管理中的各種概念并強(qiáng)制遵守一定的規(guī)則，我們的代碼將會(huì)變得更結(jié)構(gòu)化且易維護(hù)。

適用于型單頁應(yīng)用

安裝vuex

npm i vuex

新建文件夾store,建議目錄

Actions 和 mutation

mutation：（必須是同步函數(shù)）

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

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

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

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

不能直接調(diào)用一個(gè) mutation handler。這個(gè)選項(xiàng)更像是事件注冊：“當(dāng)觸發(fā)一個(gè)類型為 increment 的 mutation 時(shí)，調(diào)用此函數(shù)?！币獑拘岩粋€(gè) mutation handler，你需要以相應(yīng)的 type 調(diào)用 store.commit 方法：

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

actions

Action 類似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接變更狀態(tài)。

• 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 函數(shù)接受一個(gè)與 store 實(shí)例具有相同方法和屬性的 context 對象，因此你可以調(diào)用 context.commit 提交一個(gè) mutation，或者通過 context.state 和 context.getters 來獲取 state 和 getters

分發(fā)Action

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

區(qū)別：

action和mutation都可以改變state中數(shù)據(jù)的狀態(tài)，但是action可以處理異步函數(shù)可以在devtool中追蹤數(shù)據(jù)變化，而mutation只可以處理同步函數(shù)，當(dāng)處理異步函數(shù)的時(shí)候檢測不到數(shù)據(jù)變化；

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

數(shù)據(jù)變化之前,瀏覽器中顯示,devtool中的數(shù)據(jù)狀態(tài)

當(dāng)頁面中的數(shù)據(jù)改變之后，追蹤數(shù)據(jù)

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

數(shù)據(jù)變化之前，瀏覽器中顯示，與devtool中數(shù)據(jù)顯示

操作之后數(shù)據(jù)變化，

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

分享名稱：vuex中actions和mutation有什么區(qū)別
鏈接地址：http://bm7419.com/article32/gocopc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、網(wǎng)站改版、自適應(yīng)網(wǎng)站、外貿(mào)建站、移動(dòng)網(wǎng)站建設(shè)、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)