vue公共方法封装

在Vue中，我们可以将一些常用的方法封装成公共方法，以便在多个组件中调用。以下是一个简单的示例：

// common.js

// 获取本地存储的值
export const getLocalStorage = (key) => {
  return localStorage.getItem(key)
}

// 设置本地存储的值
export const setLocalStorage = (key, value) => {
  localStorage.setItem(key, value)
}

// 格式化时间
export const formatDate = (date) => {
  let year = date.getFullYear()
  let month = date.getMonth() + 1
  let day = date.getDate()
  return year + '-' + month + '-' + day
}

然后在需要使用这些公共方法的组件中，可以通过import导入：

// MyComponent.vue

<template>
  <div>
    <p>{{ formatDate(new Date()) }}</p>
    <button @click="handleClick">保存</button>
  </div>
</template>

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

export default {
  methods: {
    handleClick() {
      setLocalStorage('name', 'Tom')
    }
  },
  computed: {
    formatDate() {
      return formatDate(new Date())
    }
  }
}
</script>

在上面的示例中，我们在`MyComponent.vue`组件中导入了`common.js`中的`setLocalStorage`和`formatDate`方法，并在组件中使用它们。这样，我们可以在多个组件中复用这些公共方法，避免重复代码的出现，提高代码的可维护性。