小程序为什么总显示重复定义？

Question

如上图，我在多个页面都定义了 utils，所以这个页面显示重复定义，但是我去掉这里的定义又会报错 utils 未定义。要如何解决这里的波浪线报错

Answer 1

在项目的根目录下创建一个文件夹，并在其中创建utils.js文件，集中管理所有的公共方法。

const baseUrl = 'https://autext.me/api';
const nowTime = () => Date.now();
export default {
  baseUrl,
  nowTime,
};

在需要使用utils的页面中，直接引入这个公共模块，而不是在每个页面中重新定义。

import utils from '../../utils.js';
export default {
  data() {
    return {};
  },
  onLoad() {
    console.log('Current time:', utils.nowTime());
  },
};

---

可以挂载到Vue.prototype，可以在任何页面中直接使用，而不需要每次都引入。
在main.js中挂载：

import Vue from 'vue';
import utils from '../../utils.js';
Vue.prototype.$utils = utils;

在页面中调用：

export default {
  data() {
    return {};
  },
  onLoad() {
    console.log('Current time:', this.$utils.nowTime());
  },
};

Answer 2

创建 utils 文件夹

在项目中创建一个 utils 文件夹，并在其中定义所有的工具函数。这样可以将所有的工具函数集中管理，避免重复定义的问题。

目录结构

project-root/
│
├── utils/
│   ├── dateTimeUtils.js
│   ├── http.js
│   └── utils.js
│   └── index.js
│
├── pages/
│   └── history.js
│
└── ...

定义工具函数

在 utils 文件夹中定义各个工具函数模块。

dateTimeUtils.js

// utils/dateTimeUtils.js
module.exports = {
  getCurrentDate: () => {
    const date = new Date();
    return date.toISOString().split('T')[0];
  },
  // 其他日期时间工具函数
};

http.js

// utils/http.js
const axios = require('axios');

module.exports = {
  get: async (url) => {
    try {
      const response = await axios.get(url);
      return response.data;
    } catch (error) {
      console.error(error);
      throw error;
    }
  },
  // 其他 HTTP 请求工具函数
};

utils.js

// utils/utils.js
module.exports = {
  // 其他通用工具函数
  randomInt: (min, max) => {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  },
};

集中导出工具函数

在 utils 文件夹中创建 index.js 文件，并在其中集中导出所有的工具函数。

index.js

const dateTimeUtils = require('./dateTimeUtils');
const http = require('./http');
const utils = require('./utils');

module.exports = {
  dateTimeUtils,
  http,
  utils,
};

在需要使用的页面中引入 utils

在需要使用工具函数的页面中引入 utils 模块，并使用其中的函数。

history.js

// pages/history.js
const { dateTimeUtils, http, utils } = require('../../utils');

async function fetchData() {
  const data = await http.get('https://api.example.com/data');
  console.log(data);
}

function showDate() {
  console.log(dateTimeUtils.getCurrentDate());
}

function generateRandomNumber() {
  console.log(utils.randomInt(1, 100));
}

fetchData();
showDate();
generateRandomNumber();

优点

• 集中管理：所有工具函数集中在 utils 文件夹中，避免重复定义。
• 易于维护：工具函数集中管理，修改或添加工具函数时非常方便。
• 代码清晰：代码结构清晰，易于理解和扩展。