• Vue 状态管理


    类flux状态管理的官方实现

    由于多个状态分散的跨越在许多组件和交互间的各个角落,大型应用复杂度也经常逐渐增长。

    为了解决这个问题,vue提供了vuex:我们有收到elm启发的状态管理库,vuex甚至集成到vue-detools。无须配置即可访问时光旅行。

    简单状态管理起步使用

    经常被忽略的是,Vue应用中原始数据对象的实际来源-当访问数据对象时,一个vue实例只是简单的代理访问。所以,如果你有一处需要被多个实例间共享的状态,可以简单的通过维护一份数据来实现共享:

    const sourceOfTruth = {}

    const vmA = new Vue({

    data:sourceOfTruth

    })

    const vmB = new Vue({

    data:sourceOfTruth

    })

    现在当sourceOfTruth发生变化,vmA和vmB都将自动的更新引用他们的视图。子组件们的每个实例也会通过this.$root.$data去访问。现在我们有了唯一的实际来源,但是调试会成为噩梦。任何时间,我们应用中的任何部分,在任何数据改变后,都不会留下变更过的纪录。

    为了解决这个问题,我们采用一个简单的store模式:

    var store = {

    debug:true,

    state:{

    message:'Hello!'

    },

    setMessageAction(newValue){

    if(this.debug)console.log('setMessageAction triggered with',newValue)

    this.state.message = newValue

    },

    clearMessageAction(){

    if(this.debug)console.log('setMessage triggered')

    this.state.message = ''

    }

    }

    需要注意的是,所有store中state的改变,都放置在store自身的action中去管理。这种集中式状态管理能够被更容易地理解那种类型的mutation将会发生,以及他们是如何被触发。当错误出现时,我们现在也会有一个log记录bug之前发生了什么。

    此外,每个实例/组件仍然可以拥有和管理自己的私有状态:

    var vmA = new Vue({

    data:{

    privateState:{},

    sharedState:store.state

    }

    })

    var vmB = new Vue({

    data:{

    privateState:{},

    sharedState:store.state

    }

    })

    重要的是,注意你不应该在action中替换原始的状态对象-组件和store需要引用同一个共享对象,mutation才能够被观察

    组件不允许直接修改属于store实例的state,而应执行action来分发(dispatch)事件通知store去改变,我们最终达成了flux架构。这样约定的好处是,我们能够纪录所有store中发生的state改变,同时实现能做到纪录变更(mutation)、保存状态快照、历史回滚/时光旅行的先进的调试工具。

  • 相关阅读:
    基于Python的数据分析(1):配置安装环境
    Learn flask in the hard way:配置环境的安装
    网络云盘的存储机制
    读书笔记:云计算概念、技术和架构
    小型开发团队中项目管理的方法及原则
    华为专家谈CMDB建设
    2018软件工程第二次作业——个人项目
    福大软工1816 · 第一次作业
    python学习摘要(3)--字符串处理函数
    python学习摘要(4)--列表简单处理
  • 原文地址:https://www.cnblogs.com/susanws/p/7447271.html
Copyright © 2020-2023  润新知