math.js在Vue项目中的使用和封装 vue计算加减乘除

math.js在Vue项目中的使用和封装

心之苍苍

于 2020-04-08 10:43:45 发布

6207
 收藏 5
分类专栏： 前端之路 文章标签： vue js 封装
版权

前端之路
专栏收录该内容
12 篇文章0 订阅
订阅专栏
项目中出现金额的四则运算精度错误问题，引入math.js来解决，并封装四则运算方法。

安装: npm install mathjs

引入方式一：在main.js中， //网上查询得来

import * as math from 'mathjs'; // 亲测import  math from 'mathjs';不可取，朋友指出是因为math.js源码导出为模块化导出。

Vue.prototype.$math = math; //挂在到原型

之后可以在其他页面中 直接使用 this.$math.add（a,b）加，this.$math.subtract(a,b) 减，this.$math.multiply（a,b）乘，this.$math.divide（a,b）除。 a和b需要使用this.$math.bignumber();格式化一下数据类型。

例如： this.$math.add（this.$math.bignumber(a),this.$math.bignumber(b)); 太繁琐了，所以方便起见将其封装一下子。

引入方法二：在main.js中，    //网上查询得来

const { create, all } = require('mathjs')

const config = {

  number:'BigNumber',

  precision:20  //精度 20。 precision: BigNumbers的最大有效位数。

}

const math = create(all,config)；

Vue.prototype.$math = math;

使用同上。

引入方法三：在使用的页面中 

let math = require('mathjs');  //网上查询得来

math.add(math.bignumber(a),math.bignumber(b));

math.subtract(math.bignumber(a),math.bignumber(b));

math.multiply(math.bignumber(a),math.bignumber(b));

math.divide(math.bignumber(a),math.bignumber(b));

封装方法一：先在arithmetic.js（名称随意），中引入math.js（参考上面引入方法，并不用挂载到原型上）

let arithmetic = {

    //加法

    add(a,b){

        return math.add(math.bignumber(a), math.bignumber(b));

    },

    //减法

    subtract(a,b){

        return math.subtract(math.bignumber(a), math.bignumber(b));

    },

    // 乘法

    multiply(a,b){

        return math.subtract(math.bignumber(a), math.bignumber(b));

    },

    // 除法

    divide(a,b){

        return math.subtract(math.bignumber(a), math.bignumber(b));

    }

}

export default arithmetic;

使用：import arithmetic from "../utils/arithmetic"；

arithmetic.add(a,b);

arithmetic.subtract(a,b);

arithmetic.multiply(a,b);

arithmetic.divide(a,b); //看起来简洁方便很多。

封装方法二：引入math.js ，在arithmetic.js中

//加法

function add(a,b){

    return math.add(math.bignumber(a), math.bignumber(b));

};

//减法

function subtract(a,b){

    return math.subtract(math.bignumber(a), math.bignumber(b));

};

// 乘法

function multiply(a,b){

    return math.subtract(math.bignumber(a), math.bignumber(b));

};

// 除法

function divide(a,b){

    return math.subtract(math.bignumber(a), math.bignumber(b));

};

module.exports = {

    add,

    subtract,

    multiply,

    divide

}; //模块导出

使用：import {add,subtract,multiply,divide} from "../utils/arithmetic" //按需引入 ，使用哪个方法引入哪个。

add(a,b);

subtract(a,b);

multiply(a,b);

divide(a,b);

以上引入方法，都是网上查资料学习得来，只是总结归纳一下，也希望能帮到其他人，谢谢。

封装方法也是自己学习方法的封装和使用，并练习一下而已。

 
————————————————
版权声明：本文为CSDN博主「心之苍苍」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/xinshishenchao/article/details/105380861