栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Vue.js

(旺财记账)标签页+标签编辑页

Vue.js 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

(旺财记账)标签页+标签编辑页

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){
    
    }
    
  • 类型一样进行简写

    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
    
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/240045.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号