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目录下的图片及其他资源，应该使用绝对路径。