记账页面标签页面新增

记账页面和标签页面都可以新增标签。可是现在有一个bug。在标签页面新增标签之后,在记账页面不会自动同步,要刷新一下才能同步。

这是因为这两个页面的数据tagList都是分别从tagListModel里fetch的。所以就导致了数据不同步。

解决方案:在更高一层的地方统一去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了。在标签页面新增一个标签后,在记账页面也会自动同步。

把数据放到window上以后,读取数据就是通过window操作的。但是写数据,比如删除,增加,修改标签,还是通过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;

以后操作数据就全部调用store

可是这样store对象里有两种数据的操作,我们最好还是把他们分开:

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

分成recordStore和tagStore两个文件。然后统一在store里浅复制

那么全局数据管理的好处是什么?

  • 解耦:将所有数据相关的逻辑放入 store(也就是 MVC 中的 Model,换了个名字而已)。即从localStorage里取数据,存数据,对数据增删改查,都由store里的API提供,别人要对数据操作,直接调用API就可以,不需要关心里边的逻辑。
  • 数据读写更方便:任何组件不管在哪里,都可以直接读写数据。比如说,原来Tags子组件里的标签列表是由它的父组件Money传进去的,如果它要增加标签,不能自己增加,要把数据传出去在外边修改。现在做了全局数据管理之后,Tags子组件完全可以自己直接调用store,读写数据,不需要由父组件操作。
  • 控制力更强:组件对数据的读写只能使用 store 提供的 API 进行(当然也不排除有猪队友直接对 tagList 和 recordList 进行 push 等操作,这是没有办法禁止的) 前提:

我们在Money.vue里,通过recordList=store.recordList ,这个data是从存储库里取出来的,他是一个数组,所以他们共用一个地址。所以我在store里对store.recordList进行增删改查时,我的vue实例的数据recordList也会随着改变。

但是如果store里的数据不是对象,而是基本数据类型的数据呢?

我们知道,如果是基本数据类型,如字符串,数字等,传递时是复制值的。

如:如果在store里声明一个数字,

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,然后点击一个按钮调用add。发现页面里展示的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并没有监听store对象,所以改变store,Vue并不知道。那就把store写在data里,

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

为了不重复,我们把它放在App.vue里,这样Vue就监听了store对象。

这样做了以后,点击按钮,成功加1.

之后为了方便,不管是对象,还是基本的数据类型,我们都放在计算属性里,然后全局监听store对象。

以上就是vue全局数据管理示例详解的详细内容,更多关于vue全局数据管理的资料请关注阿兔在线工具其它相关文章!

点赞(0)

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部