記賬頁面標簽頁面新增

記賬頁面和標簽頁面都可以新增標簽?？墒乾F(xiàn)在有一個bug。在標簽頁面新增標簽之后，在記賬頁面不會自動同步，要刷新一下才能同步。

這是因為這兩個頁面的數(shù)據(jù)tagList都是分別從tagListModel里fetch的。所以就導致了數(shù)據(jù)不同步。

解決方案：在更高一層的地方統(tǒng)一去tagListModel里fetch一次，把取出來的設成一個全局的屬性，然后分別在兩個頁面直接使用。

我們選擇在main.ts入口文件里聲明這個全局屬性：

window.tagList=tagListModel.fetch()

可是這樣會報錯，說window里沒有這樣一個屬性。

那么我們就只能在custom.d.ts里自定義聲明window里有這樣一個屬性。

interface Window  {
    tagList: Tag[]
}

這樣再回到main.ts，就沒有報錯了。

然后就可以在兩個頁面直接使用。

在Money.vue：

export default class Money extends Vue{
        tags=window.tagList
}

在Labels.vue：

export default class Labels extends Vue {
        tags=window.tagList
}

這樣就沒有那個bug了。在標簽頁面新增一個標簽后，在記賬頁面也會自動同步。

把數(shù)據(jù)放到window上以后，讀取數(shù)據(jù)就是通過window操作的。但是寫數(shù)據(jù)，比如刪除，增加，修改標簽，還是通過tagListModel這個對象的API操作的。

將API封裝到window

那么為了看起來一致，我們最好把這些API也封裝到window上。

//main.ts
//record store
window.recordList=recordListModel.fetch()
window.createRecord=(record: RecordItem)=>{
  recordListModel.create(record)
}
// tag store
window.tagList=tagListModel.fetch()
window.createTag=(name: string)=>{
  const message=tagListModel.create(name)
  if(message==='duplicated'){
    window.alert('標簽名重復')
  }else{window.alert('添加成功')}
}
window.removeTag=(id: string)=>{
  tagListModel.remove(id)
}
window.updateTag=(id: string,newName: string)=>{
  return tagListModel.update(id,newName)
}
window.findTag=(id: string)=>{
  return window.tagList.filter(tag=>tag.id===id)[0]
}

把recordListModel,tagListModel上的屬性，方法都封裝到window上以后，有一個問題。

1. window上的變量太多了。

2. 太依賴window了，如果在不支持window的情況下，就無法操作。

解決辦法： 不要window，把這些API都封裝到一個store對象上。在store目錄里新建一個index2.ts

const store={
    //record store
    recordList: recordListModel.fetch(),
    createRecord: (record: RecordItem) => {
        recordListModel.create(record);
    },
    // tag store
    tagList: tagListModel.fetch(),
    createTag: (name: string) => {
        const message = tagListModel.create(name);
        if (message === 'duplicated') {
            window.alert('標簽名重復');
        } else {
            window.alert('添加成功');
        }
    },
    removeTag: (id: string) => {
        tagListModel.remove(id);
    },
    updateTag: (id: string, newName: string) => {
        return tagListModel.update(id, newName);
    },
    findTag: (id: string) => {
        return store.tagList.filter(tag => tag.id === id)[0];
    }
}
export default store;

以后操作數(shù)據(jù)就全部調(diào)用store

可是這樣store對象里有兩種數(shù)據(jù)的操作，我們最好還是把他們分開：

import recordStore from '@/store/recordStore';
import tagStore from '@/store/tagStore';
const store={
    ...recordStore,
    ...tagStore
}
export default store;

分成recordStore和tagStore兩個文件。然后統(tǒng)一在store里淺復制

那么全局數(shù)據(jù)管理的好處是什么？

• 解耦：將所有數(shù)據(jù)相關(guān)的邏輯放入 store（也就是 MVC 中的 Model，換了個名字而已）。即從localStorage里取數(shù)據(jù)，存數(shù)據(jù)，對數(shù)據(jù)增刪改查，都由store里的API提供，別人要對數(shù)據(jù)操作，直接調(diào)用API就可以，不需要關(guān)心里邊的邏輯。
• 數(shù)據(jù)讀寫更方便：任何組件不管在哪里，都可以直接讀寫數(shù)據(jù)。比如說，原來Tags子組件里的標簽列表是由它的父組件Money傳進去的，如果它要增加標簽，不能自己增加，要把數(shù)據(jù)傳出去在外邊修改。現(xiàn)在做了全局數(shù)據(jù)管理之后，Tags子組件完全可以自己直接調(diào)用store，讀寫數(shù)據(jù)，不需要由父組件操作。
• 控制力更強：組件對數(shù)據(jù)的讀寫只能使用 store 提供的 API 進行（當然也不排除有豬隊友直接對 tagList 和 recordList 進行 push 等操作，這是沒有辦法禁止的） 前提：

我們在Money.vue里，通過recordList=store.recordList ，這個data是從存儲庫里取出來的，他是一個數(shù)組，所以他們共用一個地址。所以我在store里對store.recordList進行增刪改查時，我的vue實例的數(shù)據(jù)recordList也會隨著改變。

但是如果store里的數(shù)據(jù)不是對象，而是基本數(shù)據(jù)類型的數(shù)據(jù)呢？

我們知道，如果是基本數(shù)據(jù)類型，如字符串，數(shù)字等，傳遞時是復制值的。

如：如果在store里聲明一個數(shù)字，

const store={
    count:0,
    addCount(){
        this.count+=1
    },
    ...recordStore,
    ...tagStore
}

然后在Money里，

export default class Money extends Vue{
        count=store.count
        add(){
            store.addCount()
            console.log(store.count);
        }

把store.count賦值給自己的data，然后點擊一個按鈕調(diào)用add。發(fā)現(xiàn)頁面里展示的count，沒有變，還是0.

因為這是值傳遞，改變的只是store里的count。

那怎么做能同步呢？使得修改store.count，我這個實例上的count也會跟著改變呢？

不要用data獲取，因為data只會獲取一遍，后邊的就不會再更新了

用computed計算屬性

@Component({
        components: {FormItem, Type, Tags, NumPad},
        computed:{
            count(){
                return store.count
            }
        }
})

在ts里，computed寫在@Component里。

我這個count是一個計算屬性，他的值是返回store.count的值。但是點擊之后，頁面上的0還是沒有加1 .

因為Vue并沒有監(jiān)聽store對象，所以改變store，Vue并不知道。那就把store寫在data里，

import store from "@/store/index2.ts"
  export default{
    data(){
      return {
        store:store,
      }
    }
  }

為了不重復，我們把它放在App.vue里，這樣Vue就監(jiān)聽了store對象。

這樣做了以后，點擊按鈕，成功加1.

之后為了方便，不管是對象，還是基本的數(shù)據(jù)類型，我們都放在計算屬性里，然后全局監(jiān)聽store對象。

以上就是vue全局數(shù)據(jù)管理示例詳解的詳細內(nèi)容，更多關(guān)于vue全局數(shù)據(jù)管理的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論