2020.3.3
后續(xù)更新
在后續(xù)操作中，我們建立了一個store來管理所有的要用到的操作录别，包括對于Tag的操作和數(shù)據(jù)的操作Record撮珠，再進(jìn)一步的封裝目的是為了減少后續(xù)開發(fā)者要考慮的問題宿饱，他們不需要考慮從哪里引入，因?yàn)槎际菑膕tore里面引入就好
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，這樣就知道是對誰進(jìn)行操作门扇，同時把
tagListModel改成了tagStore雹有，更加貼切
在做項(xiàng)目的時候，我發(fā)現(xiàn)如果不用mvc思想而是把東西堆在一起寫臼寄，會導(dǎo)致組件很臃腫
所以我選擇在文件中創(chuàng)建一個model封裝有關(guān)于數(shù)據(jù)的操作霸奕，然后引入這個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中要用的關(guān)于數(shù)據(jù)的操作放在這
所以我的label組件就可以直接調(diào)用很方便
//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('請輸入標(biāo)簽名')
if(name){
const message=tagListModel.create(name)
if(message==='duplicated'){
window.alert('重復(fù)')
}
}
}
};
</script>
所以以后要記得養(yǎng)成封裝的好習(xí)慣
