vue数据封装及获取

获取数据

这个项目用的是mock数据，我们得先利用api创建接口请求mock数据。

在vue.config.js文件中：

const appData = require('./data.json')
const seller = appData.seller

// api接口请求mock数据
  devServer: {
    before (app) {
      app.get('/api/seller', function (req, res) {
        res.json({
          errno: 0,
          data: seller
        })
      })
    }
  }

能访问即请求数据成功

绝对路径转相对路径
1、首先从node.js里面引入path模块,这个模块的主要作用是绝对路径与相对路径的转换

const path = require('path')

2、resolve() 方法取得绝对路径，再用path.join方法拼接路径

function resolve (dir) {
  	return path.join(__dirname, dir)
}

3、配置别名信息 将’src/components’转换到根目录下，可直接使用相对路径引用

chainWebpack (config) {
    config.resolve.alias
      .set('components', resolve('src/components'))
      .set('common', resolve('src/common'))
  }

4、使用
在main.js文件中直接引用

import 'common/stylus/index.styl'

在vue组件中引用

@import '~common/stylus/mixin'

原引用路径

import './common/stylus/index.styl'

这样引用文件就方便多啦！

axios数据封装

1、首先安装axios

npm i axios --save

2、创建api目录，在辅助文件helpers.js中引用

import axios from 'axios'

3、对所有get方法进行封装

// 对同一个url返回一个新的方法，对同一个方法传入不同的参数（函数柯里化）
export function get(url) {
  return function (params) {
    return axios.get(url, {
      params
    }).then((res) => {
      // 通过结构赋值的方式拿到这两个数据
      const { errno, data } = res.data
      // 如果获取数据没问题则返回数据，有误则什么都不做
      if (errno === ERR_OK) {
        return data
      }
    }).catch(() => {
    })
  }
}

4、在index.js文件中导出函数
（1）、先导入helpers.js文件获取get方法

import { get } from './helpers.js'

（2）、定义包含get方法的函数

const getSeller = get('/api/seller') 

（3）、导出函数

export {
	getSeller
}

数据使用
在vue组件中导入函数

import { getSeller } from './api'

在data()中给一个空对象存储数据

data() {
    return {
      seller: {}
    }
  }

创建一个钩子函数created() 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图

created () {
    getSeller().then((seller) => {
      this.seller = seller
    })
  }

也可以写成：(代码看起来逻辑比较清晰)

created () {
    this._getSeller()
}
methods: {
	_getSeller(){
		getSeller().then((seller) => {
      		this.seller = seller
    	})
	}
}