亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

(旺財記賬)標簽頁+標簽編輯頁

標簽:
Vue.js

1. 再次封装 recordListModel

  • 写类型的两种方法
    1. 声明一个 type
      type RecordListModel = {
        data:
      }
    
    1. 强制断言
      data: [] as RecordItem[]
    

2. 给 window 加上属性

// custom.d.ts
interface Window {
  tagList: Tag[]
}
// 目的是防止自己手贱

3. 用 window 来封装 api

  • tag 里面除了 id 的所有东西

    window.updateTag = (id: string, object: Exclude<Tag, 'id'>){
    
    }
    
  • 类型一样进行简写

    interface Window {
      tagList: Tag[],
      createTag: (name: string) => void,
      removeTag: (id:string) => boolean,
      // updateTag: (id:string, name: string) => 'success' | 'not found' | 'duplicated'
      updateTag: TagListModel['update']
    }
    

4. 目前代码存在的问题

  1. 全局变量太多
    • 通过挂到 window.store = {}解决
  2. 严重依赖 window

5. 目前代码存在的 bug

  • 导致原因,数据引用和对象引用,解决办法数据和对象都放 computed,computed 的功能是原来的值变化就会更新外面的值

6. 使用 store 小技巧

  • 在 main.ts 中写
import store2 from '@/store/index2.ts'
Vue.prototype.$store2 = store2
// 就可以在任何一个实例中用this.$store2来访问
  • 解决类型下划线的问题
    https://cn.vuejs.org/v2/guide/typescript.html#%E5%A2%9E%E5%BC%BA%E7%B1%BB%E5%9E%8B%E4%BB%A5%E9%85%8D%E5%90%88%E6%8F%92%E4%BB%B6%E4%BD%BF%E7%94%A8
    
點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消