MVC思想

2020.3.3
后续更新
在后续操作中，我们建立了一个store来管理所有的要用到的操作，包括对于Tag的操作和数据的操作Record，再进一步的封装目的是为了减少后续开发者要考虑的问题，他们不需要考虑从哪里引入，因为都是从store里面引入就好

import recordStore from '@/store/recordStore';
import tagStore from '@/store/tagStore';

const store = {
  //record store
  ...recordStore,
//Tag store
  ...tagStore
};
export default store;

同时把store里面封装的api名字更正的更加贴合其操作本身，增加代码可读性
例如把tagListModel里面的save改成了saveTag，这样就知道是对谁进行操作，同时把
tagListModel改成了tagStore，更加贴切

在做项目的时候，我发现如果不用mvc思想而是把东西堆在一起写，会导致组件很臃肿
所以我选择在文件中创建一个model封装有关于数据的操作，然后引入这个model，会使得整个组件舒服多了
以我做的为例子

//tagListModel.ts

const localStorageKeyName = 'tagList';
type TagListModel= {
  data: string[]
  fetch: () => string[]
  create: (name: string) => string
save:()=>void
}
const tagListModel = {
  data:[],
  create(name:string){
    const x=this.data as string[]
    if(x.indexOf(name)>=0){return 'duplicated'}
    x.push(name)
    this.save()
    return 'success'
  },
  fetch() {
    return JSON.parse(window.localStorage.getItem(localStorageKeyName) || '[]') ;
  },
  save() {
    window.localStorage.setItem(localStorageKeyName, JSON.stringify(this.data));
  },
};
export default tagListModel;

我把label中要用的关于数据的操作放在这
所以我的label组件就可以直接调用很方便

//label.vue

<script lang="ts">
import Vue from "vue";
import tagListModel from '@/model/tagListModel';
import {Component} from 'vue-property-decorator';
tagListModel.fetch()
@Component

export default class Labels extends Vue{
  tags=tagListModel.data

  goBack(){}
  createTag(){
    const name=window.prompt('请输入标签名')
    if(name){
     const message=tagListModel.create(name)
      if(message==='duplicated'){
        window.alert('重复')
      }
    }
  }

};
</script>

所以以后要记得养成封装的好习惯