axios请求本地json文件——调用路径只支持相对路径形式 & 设置、获取、清除sessionStorage & 跨组件通信之父组件有provide选项提供数据，子组件有inject选项来使用数据

axios请求本地json文件——调用路径只支持相对路径形式 & 设置、获取、清除sessionStorage & 跨组件通信之父组件有provide选项提供数据，子组件有inject选项来使用数据

示例

1.安装axios

npm install axios --save 

2.在main.js中引入

import { 
    createApp } from 'vue' import axios from 'axios' import VueAxios from 'vue-axios' const app = createApp(App) app.config.globalProperties.$http = axios; app.use(VueAxios, axios) 

3.在根目录下的public文件夹data文件夹下新建一个userlist.json文件内容如下

{ 
    "data":{ 
    "sucess":200, "userList":[ { 
    "success":200, "name":"王三", "key":0, "age":21, "address":"海珠区琶洲会展中心" }, { 
    "success":200, "name":"李五", "key":1, "age":32, "address":"海珠区花城大道北109号" } ], "isShow":true, "loginUrl":"http://baidu.com/image", } } 

4.在需要请求数据的文件里导入axios

import axios from 'axios' 

5.请求

<script lang="ts" setup> import axios from 'axios'; const dataSource: Ref<DataItem[]> = ref([]); //用户表格数据 // 获取表格数据 const getTableList = () => { 
    axios.get('http://127.0.0.1:8000/data/userList.json').then((res) => { 
    console.log(res, 'res'); if (res.data.data.sucess == 200) { 
    dataSource.value = res.data.data.userList; // data = res.data.data.userList; } else { 
    alert('数据获取失败'); } }); }; </script> 

实例一

src同层级，public文件夹下新建serverConfig.json

public/serverConfig.json

{ 
    "isShow":true, "loginUrl":"http://baidu.com/image", } 

src/main.ts

import { 
   createApp, ref, provide} from 'vue' import App from './App' import axios from '@/utils/request' const app = createApp(App) let isShow:any = null const getConfig = function(){ 
    axios.get('serverConfig.json').then((result)=>{ 
    // public下一级，只写文件名 app.provide('isShow',result.data.isShow) app.provide('loginUrl',result.data.loginUrl) isShow = result.data.isShow app.mount('#app') }).catch((error)=>{ 
    console.log(error) }) } getConfig() // 调用声明的全局方法 

• provide方法中第一个参数是key，第二个参数是value

页面使用

index.vue

<script setup> import {inject, ref, onMounted, watch} let isShow = ref(inject('isShow')) const loginUrl = inject('loginUrl') const getKey = () => { axios.post(process.env.VUE_API_HOST + '/login/getKey', {}).then((res)=>{ if(res.data.code == '200'){ // 设置sessionStorage window.sessionStorage.setItem('loginUrl',JSON.stringify(res.data.data)) } }) } getKey() // 获取sessionStorage const loginNewUrl = window.sessionStorage.getItem('loginUrl') // 清除sessionStorage const clearSession = (store:any) => { window.sessionStorage.removeItem('isShow') } clearSession(store) </script> 

实例二

src同层级，public文件夹下的static文件夹中，新建userInfo.json

public/static/userInfo.json

{ 
    "userName":"小明", "userId":"Manage01", } 

public中的JSON文件，在发送axios请求时，不要携带 public 这个目录名

created() { 
    axios({ 
    method: 'get', url: '/static/userInfo.json', // 不用写public，public下两级，需写文件夹名 }).then((data) => { 
    console.log(data) }) }, methods: { 
   }, } 

搭建的vue项目，要把JSON文件放到项目中的public文件夹中，并且要写绝对路径，这是因为：

• assets目录中的文件会被webpack处理解析为模块依赖，只支持相对路径形式。build的时候由Webpack解析为模块依赖。
• public/ 目录下的文件并不会被Webpack处理：它们会直接被复制到最终的打包目录（默认是dist/static）下。
  必须使用绝对路径引用这些文件，这是通过在 项目vue.config.js文件中的 assetsPublicPath 和
  assetsSubDirectory 连接来确定的。 任何放在 public/中文件需要以绝对路径的形式引用：/static/[filename]，

所以如果需要引用static目录下的图片及其他资源，应该使用绝对路径。

版权声明：

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

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