uniapp中如何使用vuex进行状态管理（登录小案例讲解）

news2024/11/17 4:45:59

前言

本篇文章来讲解uniapp中如何使用vuex来实现状态管理，后面会讲实现登录状态管理的案例。如果之前学过vuex全家桶的同学那应该没啥问题，在uniapp中使用vuex和vue中基本是一样的。

什么是vuex

简单来说就是vue中的状态管理仓库，对于vuex我之前写了两篇文章进行了详细介绍，可以点下面链接进行阅读查看：
Vuex从了解到实际运用，彻底搞懂什么是Vuex（一）
Vuex从了解到实际运用（二），获取vuex中的全局状态（state，getters）
Vuex官方文档：链接

在uniapp中使用vuex

新建store

首先我们需要新建store文件夹，在文件夹下新建index.js文件，存放vuex核心代码：

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

Vue.use(Vuex)

const store = new Vuex.Store({
	state: {// 用来缓存数据
	},
	mutations: { // 事件
	}
})

export default store

然后需要在根目录下的main.js文件中进行挂载，方便全局使用：

import store from './store/index.js'
Vue.prototype.$store = store

这样一来在项目中使用vuex的基础配置就完成了，剩下就是进行相应的使用操作

模拟登录案例

下面我们使用vuex在uniapp中实现一个模拟登录的案例，主要就是在store中进行变量的读取与更改：

首先我们先在state中定义我们需要的变量：
./store/index.js：
state中定义数据，mutations中定义改变登录值的函数

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
const store = new Vuex.Store({
	state: {// 用来缓存数据
		name: 'jack',
		isLogin: false,   //判断是否已登录
	},
	mutations: {
		// 改变isLogin的值
		setLogin(state, payload) {
			state.isLogin  = payload;
		}
	}
})
export default store

然后开始写登录页面:
在计算属性中通过mapState拿到store中state的值，然后编写登录和注销的函数进行相关的操作
因为已经将store全局挂载，所以直接可以使用this.$store.commit读取到mutations中的函数

<template>
	<view class="login">
		<view>
			登录状态： {{isLogin}}
		</view>
		<button type="default" @click="login">登录</button>
		<button type="default" @click="logout">注销</button>
		<navigator url="../index/index">首页</navigator>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		computed: {
			...mapState(['name','isLogin'])
		},
		methods: {
			// 登录
			login() {
				this.$store.commit('setLogin', true);
			},
			// 登出 注销
			logout() {
				this.$store.commit('setLogin', false);
			}
		}
	}
</script>

这里的逻辑是：如果是登录状态，则可以正常点击首页进行跳转，否则点击首页无法跳转
所以我们需要在首页进行检查登录的状态：
主要是在onload和onshow生命周期函数中进行登录状态的检查，如果没有登录则跳回原登录界面

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
			<text>{{name}}</text>
			<text>{{isLogin}}</text>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {
			this.checkLogin();
		},
		onShow() {
			this.checkLogin();
		},
		computed: {
			...mapState(['name','isLogin'])
		},
		methods: {
			checkLogin() {
				if (!this.$store.state.isLogin) {
					uni.navigateTo({
						url:"../login/login"
					})
				}
			}
		}
	}
</script>