vuex 记录用户登录状态的实例
时间: 2023-07-27 17:21:49 浏览: 56
一般来说,我们可以通过Vuex来记录用户登录状态,以下是一个简单的实例:
1. 首先,在Vuex的state中定义一个user对象,用于存储用户信息,包括用户名、密码、是否登录等信息:
```
const state = {
user: {
username: '',
password: '',
isLogin: false
}
}
```
2. 然后,在Vuex的mutations中定义一个login方法和一个logout方法,用于修改用户登录状态:
```
const mutations = {
login (state, payload) {
state.user.username = payload.username
state.user.password = payload.password
state.user.isLogin = true
},
logout (state) {
state.user.username = ''
state.user.password = ''
state.user.isLogin = false
}
}
```
3. 接下来,在Vue组件中使用Vuex来记录用户登录状态,例如:
```
<template>
<div>
<h1 v-if="isLogin">Welcome, {{ username }}!</h1>
<h1 v-else>Please login</h1>
<button v-if="isLogin" @click="logout">Logout</button>
<button v-else @click="login">Login</button>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
computed: {
...mapState({
isLogin: state => state.user.isLogin,
username: state => state.user.username
})
},
methods: {
...mapMutations([
'login',
'logout'
])
}
}
</script>
```
在上面的代码中,我们使用了Vuex的mapState和mapMutations辅助函数来将Vuex的状态和mutations映射到组件中,从而实现对用户登录状态的记录和修改。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)