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>
所以以后要记得养成封装的好习惯
