vue中的封装常用工具类

讲解Vue中的封装常用工具类的攻略，可以从如下几个方面入手：

1. 为什么要封装常用工具类

在开发Vue项目时，我们经常会遇到重复性的代码，例如字符串截取、日期格式化、数组去重等一些常用工具的编写。如果每次都重复编写这些代码，既浪费时间也不利于项目维护，通常我们会使用工具类对常用函数进行封装，封装以后，可以大大提高开发的效率，使代码更加简洁易读。

2. Vue中的常用工具类

在Vue中，常用工具类可以封装在utils.js文件中，可以按照以下步骤进行封装：

步骤一：集成工具类文件

在工程的src目录下新建utils文件夹，创建utils.js文件。在工具类文件中，我们可以编写各种常用方法。例如：

// 字符串截取
export function sliceString(str, length) {
  if (str.length > length) {
    return str.slice(0, length) + '...';
  }
  return str;
}

// 日期格式化
export function formatDate(date, fmt) {
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
  }
  let o = {
    'M+': date.getMonth() + 1,
    'd+': date.getDate(),
    'h+': date.getHours(),
    'm+': date.getMinutes(),
    's+': date.getSeconds()
  };
  for (let k in o) {
    if (new RegExp(`(${k})`).test(fmt)) {
      let str = o[k] + '';
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : ('00' + str).substr(str.length));
    }
  }
  return fmt;
}

// 数组去重
export function unique(arr) {
  return Array.from(new Set(arr));
}

步骤二：使用工具类

在Vue组件中引入工具类文件，调用其中的方法。例如：

<template>
  <div>
    <p>{{ sliceString('这是一段文本', 5) }}</p>
    <p>{{ formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss') }}</p>
    <ul>
      <li v-for="item in unique([1, 2, 3, 1, 2, 4])" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import { sliceString, formatDate, unique } from '@/utils/utils';

export default {
  name: 'MyComponent',
  methods: {
    sliceString,
    formatDate
  },
  computed: {
    unique
  }
};
</script>

3. 示例说明

下面介绍两个具体的示例说明。

示例一：根据URL参数跳转到不同的页面

// 工具类中封装的方法，用于解析URL参数
export function getUrlParams() {
  let search = window.location.search.substring(1);
  let paramsArr = search.split('&');
  let params = {};
  paramsArr.forEach(function(item) {
    let itemArr = item.split('=');
    params[itemArr[0]] = decodeURIComponent(itemArr[1]);
  });
  return params;
}

// Vue组件中使用工具类中的方法获取URL参数
computed: {
  urlParams: function() {
    return getUrlParams();
  }
}

示例二：本地缓存的封装

// 工具类中封装的方法，用于将数据保存到本地缓存中
export function setLocalStorage(key, value) {
  window.localStorage.setItem(key, JSON.stringify(value));
}

// 工具类中封装的方法，用于从本地缓存中获取数据
export function getLocalStorage(key) {
  return JSON.parse(window.localStorage.getItem(key));
}

// Vue组件中使用工具类中的方法
methods: {
  onSaveToLocal: function() {
    setLocalStorage('user', { name: 'John', age: 18 });
  }
},
computed: {
  user: function() {
    return getLocalStorage('user');
  }
}

以上就是Vue中的封装常用工具类的攻略，希望以上内容对您有所帮助。