export const useUserStore = defineStore('user', { state: () => ({ userInfo: { username: '', id: '', is_admin: '' } }), getters: { isAdmin: state => state.userInfo.is_admin === '1', getUsername: state => state.userInfo.username }, actions: { setUserInfo(username, id, is_admin) { this.userInfo.username = username this.userInfo.id = id this.userInfo.is_admin = is_admin } , getUserInfo() { const isAdmin = this.isAdmin; const username = this.getUsername; return { isAdmin: isAdmin, username: username }; } } }, { persist: true })怎么在其他.vue文件中使用,并且调用getUserInfo渲染
时间: 2023-12-22 14:06:30 浏览: 142
要在其他.vue文件中使用该store,你需要首先导入vuex,并且使用`useUserStore`函数获取store实例。
下面是一个示例:
```
<template>
<div>
<p>Username: {{ username }}</p>
<p v-if="isAdmin">You are an admin</p>
</div>
</template>
<script>
import { useUserStore } from '@/store/user'
export default {
setup() {
const userStore = useUserStore()
const { username, isAdmin } = userStore.getUserInfo()
return {
username,
isAdmin
}
}
}
</script>
```
在该示例中,我们导入了`useUserStore`函数并使用它获取store实例。然后,我们调用`getUserInfo`方法获取用户信息并将其返回给模板进行渲染。注意,在使用`setup`函数时,我们必须使用`return`语句将变量返回给模板。
阅读全文