【vuex入门系列02】mutation接收单个参数和多个参数

以下操作全部放在了这个项目当中

mutation接收单个参数和多个参数

利用$store.commit 里面写参数相当于 mutation的函数名字

    在组件里面：
    第一种方式： this.$store.commit("addIncrement",{name:'stark',age:18,n:5})
    第二种方式：
    this.$store.commit({
        type:"addIncrement",
        n:5,
        age:18,
        name:'stark.wang'
    })

在vuex里面接收：接收第二个参数相当于前面传过来的参数，如果多个这个就是对象，如果是一个参数，这个第二个参数payload就是前面的参数。

  mutations: {
        // 任何时候改变state的状态都通过提交 mutation 来改变
        // 里面可以定义多个函数，当触发这个函数就会改变state状态
        addIncrement(state, stark) {
            console.log(stark);
            // 接收一个state作为参数， 相当于上面的state
            // state.num += stark; // 当前面传一个参数的时候
            state.num += stark.n;
        },
        minIncrement(state) {
            state.num -= 5;
        }
    }

完整代码：

srccomponentsIncrement.vue 代码

<template> 
    <div>
        <h2>加减法计算器</h2>
        <div>
            <input type="button" value="-" @click="minHandle"/>
                <span>{{num}}</span>
            <input type="button" value="+" @click="addHandle"/>
        </div>
    </div>
</template>
<script>
    export default {
        // data(){
        //     return {
        //         // num:100
        //         num: this.$store.state.num,
        //     }
        // },
        computed:{
            num(){
                return this.$store.state.num
            }
        },
        methods:{
            addHandle(){
                // this.num += 5;
                // 点击的时候需要改变状态，提交mutation addIncrement
                // 利用$store.commit 里面 写参数相当于 mutation的函数名字
                // this.$store.commit("addIncrement",{name:'stark',age:18,n:5})
                // this.$store.commit({
                //     type:"addIncrement",
                //     n:5,
                //     age:18,
                //     name:'stark.wang'
                // })
            },
            minHandle(){
                // this.num -= 5;
                this.$store.commit("minIncrement")
                // this.$store.         
            }
        }
    }
</script>

vuex :/src/store/index.js 代码

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

let store = new Vuex.Store({
    state: {
        num: 100
    },
    mutations: {
        // 任何时候改变state的状态都通过提交 mutation 来改变
        // 里面可以定义多个函数，当触发这个函数就会改变state状态
        addIncrement(state, stark) {
            console.log(stark);
            // 接收一个state作为参数， 相当于上面的state
             // 在vuex里面接收：接收第二个参数相当于前面传过来的参数，如果多个这个就是对象，如果是一个参数，这个第二个参数payload就是前面的参数。
            // mutations设计原则是同步的
            //state.num += stark;
            state.num += stark.n;
        

        },
        minIncrement(state) {
            state.num -= 5;
        }
    }

})

export default store