Vuex(四)--Vue核心概念Mutation

文章目錄

1.Vuex(一)–為什麼要使用Vuex

2.Vuex(二)–Vue核心概念State

3.Vuex(三)–Vue核心概念Getter

4.Vuex(四)–Vue核心概念Mutation

5.Vuex(五)–Vue核心概念Action

6.Vuex(六)–Vue核心概念Module

更改 Vuex 的 store 中的狀态的唯一方法是送出 mutation。Vuex 中的 mutation 非常類似于事件：每個 mutation 都有一個字元串的 事件類型 (type) 和 一個 回調函數 (handler)。這個回調函數就是我們實際進行狀态更改的地方，并且它會接受 state 作為第一個參數。mutation 必須是同步函數。

不帶載荷

接前面幾篇文章的例子，這裡我們修改商品價格減半。

store.js

mutations: {
    // 商品價格減半  
    goodsPriceDiscount: state => {
        var goodsPriceDiscount = state.goodsList.map(function(item){
            return {
                price: item.price / ,
                name: item.name
            }
        })
        state.goodsList = goodsPriceDiscount;
    }
}
           

Page5.vue

要喚醒一個 mutation handler，你需要以相應的 type 調用 store.commit 方法。

methods: {
    // 商品價格減半
    discountPrice: function(){
        this.$store.commit('goodsPriceDiscount');
    },
}
           

效果圖

送出載荷（Payload）

這裡修改商品名字。

store.js

// 統一修改商品名字
changeName: (state,payload) => {
    var changeName = state.goodsList.map(function(item){
        return {
            price: item.price,
            name: payload // 接收參數
        }
    })
    state.goodsList = changeName;
}
           

這裡的載荷

payload

可以是一個對象。

Page6.vue

<div>
    <h2>我是第二個頁面</h2>
    <p>
        <input placeholder="請輸入新的名字" v-model="input_value" class="input_name" />
        <button v-on:click="changeGoodsName">修改商品名字</button>
    </p>
    <ul class="ul_list page2">
        <li v-for="item in dataList">
            <p class="name">商品：{{item.name}}</p>
            <p class="price">價格：￥{{item.price}}</p>
        </li>
    </ul>
</div>
methods: {
    // 修改商品名字
    changeGoodsName: function(){
        this.$store.commit('changeName',this.input_value);
    },
}
           

這裡的載荷

payload

就是輸入框的值。

效果圖

代碼執行過程

上面的

Mutation

執行過程是：按鈕點選–>執行按鈕點選事件方法–>執行

store.commit

–>執行

mutations

裡面對應的方法–>修改

state

裡面對應的資料–>頁面渲染。

Mutation 需遵守 Vue 的響應規則

既然

Vuex

的

store

中的狀态是響應式的，那麼當我們變更狀态時，監視狀态的

Vue

元件也會自動更新。這也意味着

Vuex

中的

mutation

也需要與使用

Vue

一樣遵守一些注意事項：

最好提前在你的

store

中初始化好所有所需屬性。

當需要在對象上添加新屬性時，你應該

使用

Vue.set(obj, 'newProp', 123)

, 或者

以新對象替換老對象。例如，利用

stage-3

的對象展開運算符我們可以這樣寫：

state.obj = { ...state.obj, newProp:  }
           

代碼下載下傳位址

請點選我！