首頁 > web前端 > Vue.js > Vuex狀態管理之Mutation的使用詳解

Vuex狀態管理之Mutation的使用詳解

藏色散人
發布: 2022-08-10 14:47:30
轉載
3009 人瀏覽過

mutations狀態更新

vuex中的store狀態更新唯一方式:提交Mutation

Mutation主要包括兩部分:

  • 字串的事件類型(type)

  • 一個回呼函數(handler),該回呼函數的第一個參數為state
    Vuex狀態管理之Mutation的使用詳解

mutations傳遞參數

在透過mutations更新資料的時候,我們可能需要攜帶一些額外的參數
參數被稱為mutations是載重(Payload)

範例:第一個按鈕點選counter 5,第二個按鈕點選counter 10

App.vue文件

<button>+5</button>
<button>+10</button>
登入後複製

store檔案中的index.js檔案

 mutations: {
    incrementCount(state, count) {
      state.counter += count
    }
  },
登入後複製

App.vue檔案

methods: {
    addCount(count) {
      this.$store.commit("incrementCount", count);
    }
  }
登入後複製

mutations提交風格

普通提交風格

this.$store.commit("incrementCount", count);
登入後複製

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

incrementCount(state, count) {
      // state.counter += count
      console.log(count);
    }
登入後複製

Vuex狀態管理之Mutation的使用詳解
特殊的提交風格

this.$store.commit({
        type: "incrementCount",
        count
      });
登入後複製
登入後複製

如果列印count,得到的是一個物件

    incrementCount(state, count) {
      // state.counter += count
      console.log(count);
    }
登入後複製

Vuex狀態管理之Mutation的使用詳解所以在mutations中這樣比較合適

incrementCount(state, payload) {
      state.counter += payload.count
      console.log(payload.count);
    }
登入後複製

App.vue中提交

this.$store.commit({
        type: "incrementCount",
        count
      });
登入後複製
登入後複製

mutations回應規則

vuex中的state是響應式的,當state中資料改變時,vue元件會自動更新。

當我們改變原有物件中的值時,頁面也會發生改變

state: {
    info: {
      name: 2401,
      age: 18
    }
  },
   mutations: {
    // 改变info中的值
    infoChange(state) {
      state.info.age = 10
    }
  },
登入後複製

在App.vue中

<h2>{{$store.state.info}}</h2>
<button>infoChange</button>
登入後複製
 infoChange() {
      this.$store.commit("infoChange");
    }
登入後複製

Vuex狀態管理之Mutation的使用詳解
Vuex狀態管理之Mutation的使用詳解
#向原有物件增加值

不能做到響應式的方法

state.info['address'] = '地球';
登入後複製

其實address已經被加到info中了,但是這樣的方法做不到響應式,所以在頁面上沒有顯示Vuex狀態管理之Mutation的使用詳解響應式方法

Vue.set(state.info, "address", '地球');
登入後複製

Vuex狀態管理之Mutation的使用詳解
刪除原有物件中的值

無法做到響應式的方法

delete state.info.age;
登入後複製

其實info中age已經被刪除,但這樣的方法做不到響應式,所以頁面上還存在age
Vuex狀態管理之Mutation的使用詳解
響應式方法

#
Vue.delete(state.info, "age")
登入後複製

Vuex狀態管理之Mutation的使用詳解

mutations常數型別

官方推薦,將mutations中的方法名稱都定義為常數,不容易出錯,也便於管理維護

在store文件下創建mutations-type.js文件,存放常數

export const INCREMENT = "increment"
export const DECREMENT = "decrement"
登入後複製

在store檔案下的index.js檔案中匯入並使用

import {
  INCREMENT,
  DECREMENT
} from "../store/mutations-type"
登入後複製
 mutations: {
    [INCREMENT](state) {
      state.counter++;
    },
    [DECREMENT](state) {
      state.counter--;
    },
  }
登入後複製

在App.vue檔案中匯入並使用

import { INCREMENT, DECREMENT } from "../src/store/mutations-type";
登入後複製
methods: {
    add() {
      this.$store.commit(INCREMENT);
    },
    sub() {
      this.$store.commit(DECREMENT);
    },
   }
登入後複製

【相關推薦:vue.js影片教學

以上是Vuex狀態管理之Mutation的使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板