uniapp 抽离公共方法

### 如何在 UniApp 中创建和使用公共方法

#### 创建公共方法库文件
为了提高代码的可维护性和重用性，在 UniApp 项目中可以将常用的函数封装成公共方法。通常这些公共方法会被放置在一个单独的文件夹内，比如 `common` 或者 `utils` 文件夹下。

// utils/common.js
export function formatDate(date, fmt) {
    let ret;
    const opt = {
        "y+": date.getFullYear().toString(),        // 年
        "M+": (date.getMonth() + 1).toString(),     // 月
        "d+": date.getDate().toString(),            // 日
        "H+": date.getHours().toString(),           // 时
        "m+": date.getMinutes().toString(),         // 分
        "s+": date.getSeconds().toString()          // 秒
        // 存在一毫秒的情况
    };
    for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length === 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, '0')))
        }
    }
    return fmt;
}

此部分展示了如何定义一个用于日期格式化的公共工具函数[^1]。

#### 导入并调用公共方法
当需要在整个应用程序的不同页面或组件之间共享逻辑时，可以通过 ES6 的 import/export 来引入已编写的公共方法。

<template>
  <view>{{ formattedDate }}</view>
</template>

<script>
import { formatDate } from '@/utils/common';

export default {
  data() {
    return {
      currentDate: new Date(),
      formattedDate: ''
    };
  },
  onLoad() {
    this.formattedDate = formatDate(this.currentDate, 'yyyy-MM-dd HH:mm:ss');
  }
};
</script>

这段代码片段显示了怎样通过 Vue 组件来加载外部定义的方法，并将其应用于视图层的数据绑定上。

#### 使用 Vuex 进行状态管理（如果适用）
对于更复杂的应用场景，尤其是涉及到多个地方都需要访问相同的状态变量或是业务逻辑的情况下，推荐采用 Vuex 库来进行全局状态管理和分发操作。这不仅有助于保持应用的一致性和简化跨组件通信，而且也方便后期扩展功能和服务端渲染的支持。

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const store = new Vuex.Store({
  state: {},
  mutations: {},
  actions: {}
});

export default store;

// main.js 需要注册该 Store 实例
import store from './store'
new Vue({ ..., store }).$mount('#app')

这里介绍了设置 Vuex 商店的基础结构，以便于后续添加更多关于集中存储处理的功能[^2]。