vue + ts 關於工具函數的封裝及導出

在使用Vue構建項目的時候，通常會封裝一些全局方法，這裏說下我使用ts構建時封裝的方式

以其中一個爲例

interface Bs {
  [propName: string]: any
}
const bs: Bs = {}



/**
 * @description: 添加持久緩存
 */
bs.setLocal = (name: string = 'default', value: string = ''): void => {
  window.localStorage.setItem(`${pn}_${ver}_${name}`, value)
}



export default bs

以對象的形式進行拋出

下面是使用

<script lang="ts">
import bs from '../assets/utils/bs'

bs.setLocal('user', this.userInfo.username)
</script>

這裏的引入 實際需要做下配置~  如果沒做配置的話 應該加上.ts的後綴就好了

爲了方便，所有ts的引入都不添加後綴 需要在vue.config.js（3.0的腳手架）中添加如下部分

chainWebpack: config => {

    config.resolve.extensions
      .merge([".ts", ".tsx", ".js", ".json"])
      .end()

  },