vue中引入json数据,无请求,直接引入的那种

vue中引入json数据

vue项目经常会造一些假数据,一般我都是直接在.vue页面里直接写,今天来看一下外部引入json数据吧
购物车页面(cart.vue)的假数据我放在了cartGoods.js里面

cartGoods.js代码如下:

const goodsJson = [
  {"id":1,"title":"苹果","price":2.2},
  {"id":2,"title":"香蕉","price":3.2},
  {"id":3,"title":"橘子","price":1.4},
  {"id":4,"title":"芒果","price":5.6},
  {"id":5,"title":"梨子","price":3.3},
  {"id":6,"title":"葡萄","price":3.6}
]

const addrList = [
  {
    id:1,
    addr:"上海市浦东新区鹏飞路5103弄7号1102"
  },
  {
    id:2,
    addr:"上海市浦东新区高青路2345弄20号101"
  }
]

export default  {
  goodsJson,
  addrList
}

引入方式没啥差别

// 引入
import goodsData from '../../static/mockJson/cartGoods';

// 应用
created(){
  console.log(goodsData)   //打印出全部
  this.goodsList = goodsData.goodsJson    // 一个js里可以声明多组数据,该用谁取谁就好 
},

渲染出来页面效果如下:

也不是啥多大的问题,只是单纯的想记录一下,有啥不对的,评论区请多指教