vue中组合式 API-依赖注入之provide和inject的用法（三）——实例之引用全局静态数据

vue中组合式 API-依赖注入之provide和inject的用法（三）——实例之引用全局静态数据

1、定义全局静态数据

src/components/constant.js

/ *@Description 全局数据 *@author 张三 *@date 2024-03-01 */ export default { 
    publicCoop:'ieop-mtg-coop',// 公共网关标识 ieopActivity:'ieop-mtg-activity',// 申请表单网关标识 ieopMtgReport:'ieop-mtg-report', // 运营服务网关标识 team:'2', // 团队标识 user:'a', // 用户标识 uploadMark:{ 
    // 上传标识 special:'special', // 专题培训 feedback:'feedback', // 用户反馈 userInfo:'userInfo', // 用户信息 }, reqHttp:{ 
    // 接口 swiperUrl:'/menu/frontsearch', // 轮播图 }, regular:{ 
    reg:new RegExp("[\\\\~!@#%$^&*()+\\|}{\":?><,./;'\\=\\-`]"), // 富文本框的正则 }, reqVar:{ 
    indexSwiper:"index", // 首页 columCodeIndexFund:"indexJJZX", // 基金中心 pTYpecoopSwiper:"coopera"， // 交易中心 pageType columCodecoopLoading:"cooperaLDY", // 交易中心-落地页 } } 

2、引用全局静态数据

src/main.ts

import constant from '@/components/constant.js'; import { 
   provide,createApp,ref} from 'vue'; const app = createApp(App); app.provide('constant',constant); app.mount('#app') 

src/App.vue

<template> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </div> <router-view/> </template> <style lang="scss"> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } #nav { padding: 30px; a { font-weight: bold; color: #2c3e50; &.router-link-exact-active { color: #42b983; } } } </style> 

3、使用全局静态数据

3.1、接口引用

src/api/activity/index.js

import axios from '@/utils/request' import { 
   getApiUrl} from '@/utils/tool' import constant from '@/components/constant' const baseUrl = getApiUrl() // 获取作品列表 export const getWorks = (params)=>{ 
    return axios.post(baseUrl + constant.ieopActivity + '/activity/admin/page/get',params) } // 专家信息导出 export const exportInfo = (params)=>{ 
    return axios({ 
    method:'post', url:baseUrl + constant.ieopActivity + '/activity/data/export' }) } 

页面

index.vue

<script> import {getWorks,exportInfo} from '@/api/activity' import {uploadFile} from '@/utils/tool' import {inject,ref,reactive} from 'vue' import {useRouter,useRoute} from 'vue-router' const router = useRouter() const route = useRoute() const constant = inject('constant') let activeType = constant.reqVar.columCodeIndexFund // 基金中心code码 const openPage= (val>{ router.push('/myCenter/workBench?id=' + val.id) router.push({ path:'/myCenter/workInfoDetail', query:{ id: route.query.id, type: 'detail' } }) } // 获取表格数据 async getList (){ try{ let result = await getWorks(this.formLine) if(result.data.code == 200){ this.tableData = result.data.data.items }else{ this.message.error(result.data.msg) } }catch(error){} } const tableData = ref([]) const formInLine = ref({ name: '', code: '' }) const page = reactive({ pageSize: 10, currentPage: 1, total:0 }) // 获取数据 const getTableData = ()=>{ const params = { ...formInline.value, pageNo:page.currentPage, pageSize: page.pageSize } post(constant.ieopActivity + '/activity/template/page/get',params).then((res)=>{ const {code, data} = res.data if(code == '200'){ tableData.value = data.items page.pageSize = data.perPageSize page.currentPage = data.currentPageNum page.total = Number(data.total) } }) } // 导出专家信息 async exportPeople (){ try{ let result = await exportInfo({id:this.activityId}) if(result.data.size){ uploadFile(result.data,'活动专家信息.xlsx') }else{ this.message.error('导出数据失败，请重试') } } catch (error){ console.log(error) } } </script> 

方法工具

src/utils/tool.js

// 基准地址 export function getApiUrl(v){ 
    return process.env.VUE_APP_API_HOST } // a标签下载 / * @param {content} 文件流信息 * @param {fileName} 附件名称 */ export function uploadFile(content,fileName){ 
    const blob = new Blob([content]) if('download' in document.createElement('a')){ 
    const elink = document.createElement('a') elink.download = fileName elink.style.display = 'none' elink.href = URL.createObjectURL(blob) document.body.appendChild(elink) elink.click() URL.revokeObjectURL(elink.href) document.body.removeChild(elink) }else{ 
    navigator.msSaveBlob(blob,fileName) } } 

.env.dev

VUE_APP_API_HOST = '/gp' 

vue.config.js

const { 
   defineConfig} = require('@vue/cli-service') module.exports = defineConfig({ 
    transpileDependencies: true, lintOnSave:false, devServer:{ 
    proxy:{ 
    '/gp': { 
    target: 'http://27.196.121.34:18080', // 后台接口IP changeOrigin: true, pathRewrite: { 
    '^/gp': '/' } } }, port: 9000, host: '27.196.104.110', // 前端本机IP host: '0.0.0.0', open: true } }) 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/sjkxydsj/10698.html