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

最新推荐文章于 2025-05-14 09:08:14 发布

原创最新推荐文章于 2025-05-14 09:08:14 发布 · 4.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue

uni-app 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍如何在Vue项目中使用Vuex进行状态管理，包括store结构、state、mutations、actions的定义与使用，以及通过不同方式修改state中的属性。同时，提供了五种修改state属性的具体示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目结构如下：

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>