本篇內(nèi)容介紹了“Vuex狀態(tài)管理之Mutation如何使用”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：申請域名、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、西豐網(wǎng)站維護(hù)、網(wǎng)站推廣。

mutations狀態(tài)更新

vuex中的store狀態(tài)更新唯一方式：提交Mutation

Mutation主要包括兩部分：

• 字符串的事件類型（type）

• 一個回調(diào)函數(shù)（handler），該回調(diào)函數(shù)的第一個參數(shù)為state
  

mutations傳遞參數(shù)

在通過mutations更新數(shù)據(jù)的時候，我們可能需要攜帶一些額外的參數(shù)
參數(shù)被稱作mutations是載荷（Payload）

例子：第一個按鈕點(diǎn)擊counter+5，第二個按鈕點(diǎn)擊counter+10

App.vue文件

+5
+10

store文件中的index.js文件

 mutations: {
    incrementCount(state, count) {
      state.counter += count
    }
  },

App.vue文件

methods: {
    addCount(count) {
      this.$store.commit("incrementCount", count);
    }
  }

mutations提交風(fēng)格

普通提交風(fēng)格

this.$store.commit("incrementCount", count);

這樣提交，如果打印count，得到的是count

incrementCount(state, count) {
      // state.counter += count
      console.log(count);
    }

特殊的提交風(fēng)格

this.$store.commit({
        type: "incrementCount",
        count
      });

如果打印count，得到的是一個對象

    incrementCount(state, count) {
      // state.counter += count
      console.log(count);
    }

所以在mutations中這樣比較合適

incrementCount(state, payload) {
      state.counter += payload.count
      console.log(payload.count);
    }

App.vue中提交

this.$store.commit({
        type: "incrementCount",
        count
      });

mutations響應(yīng)規(guī)則

vuex中的state是響應(yīng)式的，當(dāng)state中數(shù)據(jù)發(fā)生改變時，vue組件會自動更新。

當(dāng)我們改變原有對象中的值時，頁面也會發(fā)生改變

state: {
    info: {
      name: 2401,
      age: 18
    }
  },
   mutations: {
    // 改變info中的值
    infoChange(state) {
      state.info.age = 10
    }
  },

在App.vue中

{{$store.state.info}}
infoChange

 infoChange() {
      this.$store.commit("infoChange");
    }

向原有對象增加值

不能做到響應(yīng)式的方法

state.info['address'] = '地球';

其實(shí)address已經(jīng)被加到info中了，但是這樣的方法做不到響應(yīng)式，所以在頁面上沒有顯示

響應(yīng)式方法

Vue.set(state.info, "address", '地球');

刪除原有對象中的值

不能做到響應(yīng)式的方法

delete state.info.age;

其實(shí)info中age已經(jīng)被刪除，但是這樣的方法做不到響應(yīng)式，所以頁面上還存在age

響應(yīng)式方法

Vue.delete(state.info, "age")

mutations常量類型

官方推薦，將mutations中的方法名都定義為常量，不容易出錯，也便于管理維護(hù)

在store文件下創(chuàng)建mutations-type.js文件，存放常量

export const INCREMENT = "increment"
export const DECREMENT = "decrement"

在store文件下的index.js文件中導(dǎo)入并使用

import {
  INCREMENT,
  DECREMENT
} from "../store/mutations-type"

 mutations: {
    [INCREMENT](state) {
      state.counter++;
    },
    [DECREMENT](state) {
      state.counter--;
    },
  }

在App.vue文件中導(dǎo)入并使用

import { INCREMENT, DECREMENT } from "../src/store/mutations-type";

methods: {
    add() {
      this.$store.commit(INCREMENT);
    },
    sub() {
      this.$store.commit(DECREMENT);
    },
   }

“Vuex狀態(tài)管理之Mutation如何使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！