Vue使用TS或者JS如何引入MVC中的model

一、在Vue使用JS新建model的导入导出方法
1、新建一个model.js文件，写入model获取和保存数据方法为。重点看如何导出model的

const localStorageKeyName='recordList'
const model={
  fetch(){
    return JSON.parse(window.localStorage.getItem(localStorageKeyName)||'[]')
  },
  save(data){
    window.localStorage.setItem(localStorageKeyName,JSON.stringify(data))
  }
}

export {model}  //导出重点没有加default

2、在组件中导入model

<script lang="ts">
import Vue from 'vue'
import {Component,Watch} from 'vue-property-decorator';

const model =require('@/model.js').model   //导入model
//const {model} =require('@/model.js')   --析构写法也可以
const recordList:RecordItem=model.fetch()

type RecordItem ={  //如何在TS中声明一个复杂类型
  tags:string[];
  ...
  amount:number;
}

@Component
export default class Money extends Vue {
 ....
}
</script>

如果导出用的是export default model,那么导入就需要改写成const model =require('@/model.js').default。这两种都可以，看你自己需要就行。

一、在Vue使用TS新建model的导入导出方法
1、新建一个文件custom.d.ts文件，将复杂函数声明放进这个全局声明文件中。文件名无所谓，关键结尾是.d.ts。记得有export导出，那么用到它的文件就需要导入import。

 export type RecordItem ={  //如何在TS中声明一个复杂类型
  tags:string[];
  ...
  amount:number;
}

1、新建一个model.ts文件，写入model获取和保存数据方法为。重点看如何导出model的，以及返回值和变量在TS中都需要指定类型。

const localStorageKeyName = 'recordList';
const model = {
  fetch() {
 //指定返回值类型是RecordItem
    return JSON.parse(window.localStorage.getItem(localStorageKeyName) || '[]') as RecordItem;  
  },
  save(data:RecordItem[]) {   //变量指定类型是RecordItem
    window.localStorage.setItem(localStorageKeyName,JSON.stringify(data));
  }
};
export default model;  //导出model

2、在组件中导入model

<script lang="ts">
import Vue from 'vue'
import {Component,Watch} from 'vue-property-decorator';
import {RecordItem} from '@/custom';  //导入RecordItem类型
import model from '@/model';   //导入model

//由于model.fetch()之前已经指定类型，所以这里recordList不用再指定
const recordList=model.fetch()   

@Component(
    { components: {Tags, Notes, Types, NumberPad},}
)
export default class Money extends Vue {
...
}
</script>

总结一点：因为TS返回值和变量参数都是需要指定返回值的类型，所以如果类型是复杂类型的，建议写在custom.d.ts文件中作为全局声明引用就行。