Vuex小例子：状态切换

努力努力再努力dyx

已于 2022-06-27 01:12:40 修改

阅读量297

点赞数 1

分类专栏：例子 Vue 文章标签：前端 javascript html

于 2022-06-27 00:56:35 首次发布

本文链接：https://blog.csdn.net/weixin_45844109/article/details/125476608

版权

这篇博客通过一个Vuex的小例子展示了如何管理前端应用的登录状态。内容包括：登录时状态从0变为1，登录成功后显示用户名及退出按钮。文章详细介绍了login.vue和dologin.vue组件，以及Vuex的state.js和index.js配置。登录过程分为登录前、登录中、登录成功三个阶段，并讨论了使用localStorage实现数据持久化的方案。

摘要由CSDN通过智能技术生成

Vuex小例子功能描述：
在页面点击登录，打开登录界面，未登录状态是0，登录状态是1，初始状态是0，当用户名和密码输入正确的时候，登录状态改为1，点击登录处变成用户名并伴随退出登录按钮。

组件一：登录组件代码：
login.vue

<template>
	<div>
		<h1 v-if="$store.state.islogin==1">用户：admin <button type="button" @click="logout">退出登录</button></h1>
		<h1 v-else>
			<router-link to="/dologin">登录</router-link>
		</h1>
	</div>
</template>

<script>
	import {
   mapMutations} from 'vuex'
	export default{
   
		methods:{
   
			...mapMutations(['dologout']