文章目录

• • Mutation
  • • 调用Mutation函数的方式
    • • 第一种：this.$store.commit
      • 第二种

Mutation

不允许组件直接更改Store中的数据，可以使用Mutation变更Store中的数据

Mutation用于变更Store中的数据。

• 只能通过mutation变更Store数据，不可以直接操作 Store 中的数据。
• 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化

// 定义 Mutation
const store = new vuex.store({
    state: {
		count: 0
    },
	mutations: {
        add (state) {
			//变更状态
            state.count++
        }
	}
})

// 触发mutation
methods: {
    handle1() {
        //触发mutations的第一种方式
        this.$store.commit ( 'add ' )
    }
}

可以在触发mutations 时传递参数:

//定义Mutation
const store = new vuex.store({
    state: {
	count: 0,
    },
    mutations: {
        addN (state, step){
            //变更状态
        	state.count += step
        }
	}
})

调用Mutation函数的方式

第一种：this.$store.commit

// 触发mutation
methods: {
    handle1() {
        //触发mutations的第一种方式
        this.$store.commit ( 'add ' )
    }
}

可以在触发mutations 时传递参数:

//定义Mutation
const store = new vuex.store({
    state: {
	count: 0,
    },
    mutations: {
        addN (state, step){
            //变更状态
        	state.count += step
        }
	}
})

第二种

this.$store.commit()是触发mutations的第一种方式，触发mutations的第二种方式:

// 1．从vuex中按需导入mapMutations函数
import ( mapMutations ] from 'vuex'

通过刚才导入的mapMutations函数，将需要的mutations函数，映射为当前组件的methods方法:

// 2．将指定的 mutations函数，映射为当前组件的methods函数
methods : {
...mapMutations ( [ 'add' , ' addN ' ])

}