uni vuex使用

最新推荐文章于 2025-10-08 09:33:29 发布

原创最新推荐文章于 2025-10-08 09:33:29 发布 · 980 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni #小程序 #vue #vuex

html5 同时被 3 个专栏收录

10 篇文章

订阅专栏

vue学习

7 篇文章

订阅专栏

移动端

3 篇文章

订阅专栏

该博客主要介绍了Uniapp中Vuex的使用。具体步骤包括新建store/index.js文件，在main.js中添加相关引入，还举例说明了在login.vue中如何使用Vuex，为开发者在Uniapp项目里运用Vuex提供了操作指引。

uniapp vuex使用

1、新建store/index.js

···
import Vue from ‘vue’
import Vuex from ‘vuex’

Vue.use(Vuex)

const store = new Vuex.Store({
	state: {
		hasLogin: false,
		userInfo: {},
	},
	mutations: {
		setLogin(state, provider) {
			state.hasLogin = true;
			state.userInfo = provider;
			uni.setStorage({//缓存用户登陆状态
			    key: 'userInfo',  
			    data: provider  
			}) 
			console.log(state.userInfo);
		},
		setLogout(state) {
			state.hasLogin = false;
			state.userInfo = {};
			uni.removeStorage({  
                key: 'userInfo'  
            })
		}
	},
	actions: {
	
	}
})

export default store

···

2、在main.js中添加

···
import store from ‘./store’

Vue.protory.$store = store;

···

3、举例在login.vue中使用

	<template>
	<view class="login-form">
		<view class="login-title">LoginForm</view>
		<view class="login-box">
			<form @submit="formSubmit"> 
				<view class="section">  
					<input class="l-input" name="userName"  placeholder="please input here" />
				</view> 
				<view class="section"> 
				
					<input class="l-input" password name="password" placeholder="please input here" />
				</view> 
				<view class="btn-area">
					<button class="l-btn" formType="submit" >登陆</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	import { mapMutations } from 'vuex';

	export default {
		data() {
			return {
				
			};
		},
		methods:{
			...mapMutations(['setLogin']),
			
			formSubmit(e){  
			 	this.setLogin(e.detail.value);  
			}
	 	
	}
</script>

<style lang="scss">
	...
</style>