uni-app plus vue3 に関するよくある質問

1. ローカル JSON ファイルを導入する

1.フェッチメソッド

fetch APIファイルをロードするために使用します本地JSON。

<script>
	fetch('/source/dataJson/drugsList.json')
	.then(res=>res.json())
	.then(data=>{
      
      
		console.log(data)
	})
</script>

fetch関数のパラメータはローカルJSONファイル パスです。パスの正確さに注意してください。メソッド.then()を通じてデータを解析して応答し、.json()メソッドを通じて変換しJSON格式、最後に必要なデータの
学習アドレスを出力します。

2.アクシオス

1.axiosをインストールする

npm  i axios -s

2.(drugList.vue)を使用する

<script>
import axios from 'axios'
axios.get('http://localhost:3000/source/dataJson/drugsList.json').then((res) => {
      
      
	console.log(res)
})
</script>

3. Object.assign()

1.JSONファイル（drugsList.json）

{
    
    
    "code": 0,
    "data": {
    
    
        "b2cDirectoryIdChildList": [],
        "brandIdChildList": [],
        "commentImgUrl": "",
        "commentLinkUrl": "",
        "commentMsg": "",
        "commentType": "1",
        "deliveryText": "",
        "filterInfoList": [],
        "groupShops": [],
        "isCityOpened": 0,
        "isListData": 0,
        "pageNo": 1,
        "pageSize": 20
        }
}

2. ファイル(drugList.vue)を使用します。

<script>
import dataBasemap from '@/source/dataJson/drugsList.json'
export default {
      
      
	data() {
      
      
		let config = {
      
      }
		Object.assign(config, dataBasemap)
		return {
      
      
			drugsList: config
		};
	},
	mounted(){
      
      
		consloe.log(drugsList)
	}
}
</script>

注:
1. Vue3 を使用しており、仕様 (インポート)esModule(export导入,import引入)をサポートしていません2.ローカルの js ファイルおよび json ファイルを読み込むことはできません。読み込むことはできますが、最後にインポートして使用することしかできません。commonJSrequire
uni.requestjqjqH5