之前写过一篇文章关于vue3+antd的框架模板，链接如下：http://t.csdn.cn/9dZMS
下面针对App.vue页面实时获取权限+用户信息的功能做一下记录
1.App.vue代码
<template>
<ConfigProvider :locale="locale">
<ThemeProvider is-root v-bind="themeConfig" :apply-style="false" :color="{ primary: { DEFAULT: '#f90' } }">
<stepin-view
system-name=""
logo-src="@/assets/logo.png"
:class="`${contentClass}`"
:user="user"
:navMode="navigation"
:useTabs="useTabs"
:themeList="themeList"
v-model:show-setting="showSetting"
v-model:theme="theme"
@themeSelect="configTheme"
>
<template #headerActions>
<HeaderActions @showSetting="showSetting = true" />
</template>
</stepin-view>
</ThemeProvider>
</ConfigProvider>
</template>
2.js代码
<script lang="ts" setup>
import { ConfigProvider } from 'ant-design-vue';
import { reactive, ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { useAccountStore, useSettingStore, storeToRefs } from '@/store';
import avatar from '@/assets/avatar.png';
import { HeaderActions } from '@/components/layout';
import { configTheme, themeList } from '@/theme';
import { ThemeProvider } from 'stepin';
const { logout, profile } = useAccountStore();
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import 'dayjs/locale/ar';
import 'dayjs/locale/en';
dayjs.locale('zh-cn');
import zhCN from 'ant-design-vue/es/locale/zh_CN.js';
const showSetting = ref(false);
const router = useRouter();
const locale = zhCN;
// 获取个人信息
profile((response, account) => {});
let user = computed(() => {
const { account } = storeToRefs(useAccountStore());
return {
name: account?.value?.name,
avatar: account?.value?.headPhoto || avatar,
menuList: [
{ title: '个人中心', key: 'personal', icon: 'UserOutlined', onClick: () => router.push('/userInfo') },
{ type: 'divider' },
{
title: '退出登录',
key: 'logout',
icon: 'LogoutOutlined',
onClick: () =>
logout().then(() => {
router.replace('/login');
}),
},
],
};
});
const { navigation, useTabs, theme, contentClass } = storeToRefs(useSettingStore());
const themeConfig = computed(() => themeList.find((item) => item.key === theme.value).config);
</script>
重要的代码如下：
通过computed计算属性进行用户信息的实时监听，用户信息更改时也会重新触发user参数的变化，最终导致user内容保持为最新的。
// 获取个人信息,只要是刷新整个系统，也就是刷新浏览器的时候，就会触发这个`profile`的方法来获取权限。
import { useAccountStore, useSettingStore, storeToRefs } from '@/store';
const { logout, profile } = useAccountStore();
profile((response, account) => {});
//为了实时获取用户信息，则需要通过这个`computed`计算属性来处理。
let user = computed(() => {
const { account } = storeToRefs(useAccountStore());
return {
name: account?.value?.name,
avatar: account?.value?.headPhoto || avatar,
menuList: [
{ title: '个人中心', key: 'personal', icon: 'UserOutlined', onClick: () => router.push('/userInfo') },
{ type: 'divider' },
{
title: '退出登录',
key: 'logout',
icon: 'LogoutOutlined',
onClick: () =>
logout().then(() => {
router.replace('/login');
}),
},
],
};
});
完成！！！多多积累，多多收获！！！
下面补充一下vue3的computed的内容：
vue3 中 的 computed 的使用，由于 vue3 兼容 vue2 的选项式API，所以可以直接使用 vue2的写法，这篇文章主要介绍 vue3 中 computed 的新用法，对比 vue2 中的写法，让您快速掌握 vue3 中 computed 的新用法。
组合式 API 中使用 computed 时，需要先引入：import { computed } from “vue”。引入之后 computed 可以传入的参数有两种：回调函数和 options 。具体看看它是如何使用的?
一、函数式写法
在vue2中，computed 写法：
computed:{ sum(){ return this.num1+ this.num2 } }
在vue3 如果使用选项式API也可以这样写，主要看下组合式API的使用。
示例1：求和
import { ref, computed } from “vue” export default{ setup(){ const num1 = ref(1) const num2 = ref(1) let sum = computed(()=>{ return num1.value + num2.value }) } }
调用 computed 时， 传入了一个箭头函数，返回值作为 sum 。相比之前，使用更加简单了。如果需要计算多个属性值，直接调用就可以。如：
let sum = computed(()=>{ return num1.value + num2.value }) let mul = computed(()=>{ return num1.value * num2.value })
该示例过于简单，看不明白的可在文章后面阅读完整实例1。
二、options 写法
计算属性默认只有 getter ，在需要的时候也可以提供 setter 。在vue2中用法如下：
computed:{ mul:{ get(){ // num1值改变时触发 return this.num1 * 10 }, set(value){ // mul值被改变时触发 this.num1 = value /10 } } }
mul 属性是 给num1 放大10，如果修改 mul 的值，则 num1 也随之改变。
在 vue3 中 ：
let mul = computed({ get:()=>{ return num1.value *10 }, set:(value)=>{ return num1.value = value/10 } })
这两种写法不太一样，仔细观察区别不大，get 和 set 调用也是一样的。
在此示例中代码简单，如果没太理解，可查看文章后面的完整实例2。
完整实例1：
{{num1}} + {{num2}} = {{sum}}
<button @click=“num1++”>num1自加 <button @click=“num2++”>num2自加
完整实例2：
{{num1}} + {{num2}} = {{sum}}
<button @click=“num1++”>num1自加 <button @click=“num2++”>num2自加
{{num1}} * 10 = {{mul}} <button @click=“mul=100”>改值
三、computed 传参
计算属性需要传入一个参数怎么写呢?
<div v-for=“(item,index) in arr” :key=“index” @click=“sltEle(index)”> {{item}}
直接这样写，运行的时候，出现错误：Uncaught TypeError: $setup.sltEle is not a function。
原因：
computed 计算属性并没有给定返回值，我们调用的是一个函数，而 computed 内部返回的并不是一个函数，所以就会报错：sltEle is not a function。
解决办法：文章来源：https://www.toymoban.com/news/detail-634425.html
需要在计算属性 内部返回一个函数。修改代码如下：
const sltEle = computed( ()=>{ return function(index){ console.log(‘index’,index); } })文章来源地址https://www.toymoban.com/news/detail-634425.html
到了这里，关于vue3+antd——实现App.vue页面实时获取权限+用户信息的功能——基础积累的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
