vuex mapMutations使用

Vuex 学习

Vuex 全局配置

Vuex使用mapState

Vuex Mutation

vuex mapMutations使用

Vuex Actions使用

---

mapMutations使用

在调用mutation的方法时，除了this.$store.commit(‘方法名’,‘追加参数’)以外，还可以使用mapMutations的映射方式。

看代码：

vuex对象代码：

import Vue from "vue"
import Vuex from "vuex"

import {
	mapState
} from "vuex"

Vue.use(Vuex)

const store = new Vuex.Store({
	state: {
		token: "123123123"
	},
	mutations: {
		settoken(state, token) {
			state.token = token
		}
	},
	actions: {
		//异步处理
	}
})

export default store

页面中使用：

<template>
	<view class="content">
		<!-- <uni-fab /> -->

		<!-- <text>{{$store.state.token}}</text> -->
		<text @click="changeToken">{{token}}</text>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations //倒入vuex中的mapMutations函数
	} from "vuex"
	export default {
		computed: {
			...mapState(["token"])
		},
		data() {
			return {}
		},
		methods: {
			//映射到页面中，直接调用settoken方法
			...mapMutations(['settoken']),
			changeToken() {
				// this.$store.commit('settoken', "abcdabcdabcd")
				this.settoken("eeeeeeee")
			}
		}

	}
</script>

<style lang="scss">
	.content {
		background-color: aqua;
	}
</style>