在uni-app项目中如何使用同步或者异步的的方式修改State中定义的属性

项目结构如下：store/index.js代码如下：import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {/*** 是否需要强制登录*/forcedLogin: false,hasLogin: fals...

zhengzizhi

4089人浏览 · 2020-04-29 00:07:13

zhengzizhi · 2020-04-29 00:07:13 发布

项目结构如下：

store/index.js代码如下：

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

Vue.use(Vuex)

const store = new Vuex.Store({
	state: {
		/**
		 * 是否需要强制登录
		 */
		forcedLogin: false,
		hasLogin: false,
		userName: ""
	},
	mutations: {
		login(state, userName) {
			state.userName = userName || '新用户';
			state.hasLogin = true;
		},
		logout(state) {
			state.userName = "";
			state.hasLogin = false;
		}
	},
	actions: {
		loginAsync4:async ({commit, state}, payload)=>{
		  return new Promise((resolve) => {
		  	setTimeout(() => {
		  		commit('login', payload)
		  		resolve(payload)
		  	}, 1000)
		  });
		},
		async loginAsync3 ({commit, state}, payload) {
			commit('login',await new Promise((resolve) => {
				setTimeout(() => {
					state.userName = payload
					resolve(state.userName)
				}, 1000)
			}));
		},
		loginAsync2({commit}, {callback,payload}) {
			setTimeout(() => {
				commit('login', payload);
				callback();
			}, 1000);
		},
		loginAsync1({commit}, payload) {
			return new Promise((resolve) => {
				setTimeout(() => {
					commit('login', payload)
					resolve()
				}, 1000)
			});
		}
	}
})

export default store

main.js代码如下：

import Vue from 'vue'
import App from './App'

import store from './store'

Vue.config.productionTip = false

Vue.prototype.$store = store

App.mpType = 'app'

const app = new Vue({
	store,
    ...App
})
app.$mount()

index/index.vue代码如下：

<template>
	<view class="content">
		<view class="text-area">
			<text class="title">{{userName}}</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	export default {
		computed: {
			userName() {
				return this.$store.state.userName
			}
		},
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {
			this.$store.state.userName = 'jason@hotmail.com';
			console.log('同步方式修改userName: ' + this.userName);
			
			this.$store.commit('login', 'rainly@china.com');
			console.log('同步方式修改userName: ' + this.userName);

			this.login('zhengzizhi@126.com');
			console.log('同步方式修改userName: ' + this.userName);
           
			this.$store.dispatch('loginAsync2',{callback:() => {
				console.log('loginAsync2 userName: ' + this.userName);
			}, payload:'sunny@china.com'});
			
			this.test1();
			this.test2();
			
			var that = this;
			that.$store.dispatch('loginAsync1', 'sunny@china.com').then(() => {
				console.log('loginAsync1 userName: ' + that.userName);
			});


			
		},
		methods: {
			...mapMutations(['login']),
			...mapActions(['login']),
			async test1() {
				console.log('async test1 hello world');
				const userInfo = await this.$store.dispatch('loginAsync3', 'shardingsphere@aliyun.com').then((e) => {
					console.log('loginAsync3 userName: ' + this.userName);
					return e;
				});
				console.log('loginAsync3 userInfo: ' + userInfo);
			},
			async test2() {
				console.log('async test2 hello world');
				const userInfo = await this.$store.dispatch('loginAsync4', 'mycat@aliyun.com').then((e) => {
					console.log('loginAsync4 userName: ' + this.userName);
					return e;
				});
				console.log('loginAsync4 userInfo: ' + userInfo);
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

再列举五种不同的方式修改state中定义的属性userName,
我们还是使用上面范例中的代码文件store/index.js和main.js
(store/index.js文件代码与异步action相关的代码可以去掉)，

方式一的代码如下：

mapActions与异步调用有关，我们可以去掉它，当然也可以保留它，

这5种不同写法你可以取代上面列举范例中相应位置的代码，照样能用在异步调用中。

<template>
	<view class="content">
		<view class="text-area">
			 <!--修改state中的属性userName 第一种方式-->
			<text class="title">{{$store.state.userName = 'demo@example.com'}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {
			
		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

方式二的代码如下：

<template>
	<view class="content">
		<view class="text-area">
			 <!--修改state中的属性userName 第二种方式-->
			<text class="title">{{userName}}</text> <!--步骤二-->
		</view>
	</view>
</template>

<script>
	export default {
		computed: {
			userName() {
				return this.$store.state.userName //步骤一，computed定义userName(){}格式是以计算属性的方式
			}
		},
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {
			this.$store.state.userName = 'jason@hotmail.com'; //步骤三 测试修改和输出 
			console.log('同步方式修改userName: ' + this.userName);
		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

方式三的代码如下：

<template>
	<view class="content">
		<view class="text-area">
			 <!--修改state中的属性userName 第三种方式-->
			<text class="title">{{userName}}</text> <!--步骤三-->
		</view>
	</view>
</template>

<script>
	import {
		mapState
		// mapMutations,
		// mapActions 
	} from 'vuex' //步骤一
	export default {
		computed:mapState({
			userName:state => state.userName //步骤二,对象方式
		}),
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {
			this.$store.state.userName = 'jason@hotmail.com'; //步骤四 测试修改和输出 
			console.log('同步方式修改userName: ' + this.userName);
		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

方式四的代码如下：

<template>
	<view class="content">
		<view class="text-area">
			 <!--修改state中的属性userName 第四种方式-->
			<text class="title">{{userName}}</text> <!--步骤三-->
		</view>
	</view>
</template>

<script>
	import {
		mapState
		// mapMutations,
		// mapActions 
	} from 'vuex' //步骤一
	export default {
		computed:mapState([
			'userName' //步骤二,数组方式
		]),
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {
			this.$store.state.userName = 'jason@hotmail.com'; //步骤四 测试修改和输出 
			console.log('同步方式修改userName: ' + this.userName);
		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

方式五的代码如下：

<template>
	<view class="content">
		<view class="text-area">
			 <!--修改state中的属性userName 第五种方式-->
			<text class="title">{{userName}}</text> <!--步骤三-->
		</view>
	</view>
</template>

<script>
	import {
		mapState
		// mapMutations,
		// mapActions 
	} from 'vuex' //步骤一
	export default {
		computed:{
			//步骤二,以对象扩展运算符的方式
		...mapState(['userName'])
		},
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {
			this.$store.state.userName = 'jason@hotmail.com'; //步骤四 测试修改和输出 
			console.log('同步方式修改userName: ' + this.userName);
		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...