// Qzone 登录数据 SET_QZONEUSERINFO(state, qzoneUserInfo) { state.qzoneUserInfo = qzoneUserInfo } 如何获取值,请给我一个完整的示意
时间: 2024-02-09 22:09:12 浏览: 34
好的,这里是一个完整的示例代码:
1. 在你的组件中,引入 Vuex store 并获取 qzoneUserInfo 值:
```javascript
import { mapState } from 'vuex';
export default {
computed: {
...mapState({
qzoneUserInfo: state => state.qzoneUserInfo,
}),
},
// 其他组件代码...
};
```
2. 在模板中使用获取到的 qzoneUserInfo 值:
```html
<template>
<div>
<div v-if="qzoneUserInfo">
<img :src="qzoneUserInfo.avatar" />
<p>{{ qzoneUserInfo.nickname }}</p>
</div>
<div v-else>
<button @click="login">登录</button>
</div>
</div>
</template>
```
在这个示例中,我们使用了 Vuex 的 mapState 辅助函数来获取 qzoneUserInfo 值,并将其赋值给组件的 computed 属性中的 qzoneUserInfo 属性。在模板中,我们使用了 v-if 和 v-else 来判断用户是否已经登录,并分别展示不同的内容。
当 qzoneUserInfo 存在时,我们展示用户头像和昵称;当 qzoneUserInfo 不存在时,我们展示一个登录按钮。在这个示例中,我们假设用户点击登录按钮后会触发 login 方法,该方法会触发 Vuex store 中的 SET_QZONEUSERINFO mutation,将用户信息保存到 state 中。