vuex的Mutation怎么使用

這篇“vuex的Mutation怎么使用”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vuex的Mutation怎么使用”文章吧。

Vuex - Mutation

更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation. 這是官方文檔的原文. 不要通過其他方式去修改store中的狀態, 這點非常關鍵, 那樣做會使狀態不收我們管控的.

在stroe中定義一個mutation, 作用是將count++.

mutations:{

addCount(state){

state.count++;

}

},

mutation的第一個參數是state, 通過他我們能拿到state中定義的狀態.

在組件內調用定義的mutation(路由1). 通過this.$store.commit("addCount")觸發store中的addCount, 從而改變count的值. 這樣在其他頁面引用的count都會跟著改變.

methods:{

    filterAgeGt18(arr){

        return arr.filter((ele, ind) => {

            return ele.age > 18;

        });

    },

    addCountInR1(){

        this.$store.commit("addCount");

    }

}

給mutation傳參, 在改變store中的狀態時, 可能需要傳遞進參數. 再定義一個mutation:addCountWithParams, 實現將count的值與傳遞的參數相加.

mutations:{

addCount(state){

state.count++;

},

addCountWithParams(state, params){

state.count += params;

},

pushDataToArrat(state){

state.array.push({

name:"sunq",

age:100

})

}

},

組件內傳遞參數調用(路由2.1).

methods:{

    addLocalCount(){

        this.localCount++;

    },

    addCount(){

        this.$store.commit("addCountWithParams", Math.ceil(Math.random() * 20));

    }

},

傳入一個隨機的1-20的整數, 與count相加.

官方推薦傳遞一個對象參數, 實踐中也確實這樣, 避免了對參數個數的控制, 而且這樣更能和mutation的對象方式的提交組合使用, 寫法更簡潔.

再定義一個mutation, 傳遞一個對象參數.

mutations:{

addCount(state){

state.count++;

},

addCountWithParams(state, params){

state.count += params;

},

addCountWithObjParams(state, params){

state.count += params.num;

}

},

在組件中使用對象的方式調用addCountWithObjParams(路由3).

methods:{

    addCount(){

        //普通方式提交

        this.$store.commit("addCountWithObjParams", {

            num: Math.ceil(Math.random() * 10)

        });

        //對象方式提交

        this.$store.commit({

            type: "addCountWithObjParams",

            num: Math.ceil(Math.random() * 10)

        });

    }

},

上面代碼提交了兩次, 分別使用普通方式提交和對象風格提交addCountWithObjParams.

Mutation 需遵守 Vue 的響應規則, 所以需要注意兩點,

mutation改變的變量需先在state中聲明好,

對于對象屬性的增加, 不能使用普通方式, 如 o1.k1 = 12; 這樣的增加屬性雖然可以實現效果, 但是vue的響應式是檢測不到的, 那么關于此對象的雙向數據就不會觸發.

舉個栗子.

state中增加一個對象aObject.

state:{

count:13,

anotherCount:17,

aObject:{

a:147

}

},

組件內獲得對象, 并使用v-for將所有鍵值對渲染(路由3).

使用mapState獲得:

computed:mapState(["anotherCount","count", "aObject"])

頁面渲染:

<ul>

    <li v-for="(v,k) in aObject">store中的對象aObject的{{k}}的值 : {{v}}</li> 

</ul>

增加一個mutation, 給對象新增一個屬性.

mutations:{

addCount(state){

state.count++;

},

addCountWithParams(state, params){

state.count += params;

},

addCountWithObjParams(state, params){

state.count += params.num;

},

changeAvalue(state){

state.aObject.b = 149;

console.log(state.aObject);

}

},

組件內commit這個mutation(路由3).

changeA(){

    this.$store.commit({

        type: "changeAvalue"

    });

}

效果是控制臺打印的對象已經有b這個屬性了, 但是頁面的渲染卻沒有變化.

正確的姿勢應該是用Vue提供的set方法.修改changAvalue這個mutation. Vue.set()

changeAvalue(state){

// state.aObject.b = 149;

Vue.set(state.aObject, "b", 149);

console.log(state.aObject);

},

再次執行提交mutation的操作頁面的列表渲染會跟著更新.

輔助函數的使用. mapMutations (路由4).

和state, getter一樣, mutatin也有一個輔助函數. 回顧一下上面的邏輯, 我們在點擊事件的事件處理函數中提交mutation, 那為什么不直接將mutation作為點擊事件的事件處理函數呢, 這樣不就少了一層函數的嵌套. mapMutations就可以實現這點.

mapMutations可以將mutation映射到組件內的methods中, 同mapGetters一樣, 可以傳遞數組, 將mutation映射到組件內的同名method上, 也可以傳遞對象, 給mutation起一個組件內的別名.

methods:{

    ...mapMutations([

      'addCount',

    ]),

    ...mapMutations({

      add: 'addCount'

    })

},

這樣可將addCount和add直接賦給按鈕的點擊事件, 即可實現將count加1的操作.

<div>

    <h3>mutation的輔助函數的使用</h3>

    <div>

        <button @click="addCount">增加Count</button>

        <button @click="add">還是增加Count</button>

    </div>

    <div>

        <span class="count">count的值 : {{count}}</span>

    </div>

</div>

mutation所做的操作都是同步的, mutation不能進行異步的操作state中的變量,

以上就是關于“vuex的Mutation怎么使用”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。