zoukankan      html  css  js  c++  java
  • vuex

    1.vuex是什么

    vuex是vue.js的一种状态管理的模式,它通过全局注入store对象,来实现组件间的数据共享。适用于复杂的数据处理,如深层级组件的通信。

    2.vuex的五个属性:

    state,mutation,action,getter,module

    state:(相当于vue中的data) this.$store.state,响应式数据,数据变化,组件同步更新。
    
    getter:(相当于vue中的computed)this.$store.getter,,store的计算属性。
    
    mutation:(相当于vue中的methods),this.$store.commit(''),主要用来操作state数据。
    
    action:与mutation类似,this.$store.dispach('')  包含异步操作,可以提交mutation,而不是直接更改state。
    
    module:将store分割成模块,每个模块拥有自己的 state、mutation、action、getter,甚至是嵌套子模块
    3.vuex数据传递流程:

    当组件要进行数据修改的时候,通过dispach触发action里的方法,action里每个方法都有一个commit方法,通过commit来触发mutation里的方法,mutation里每个函数都有一个state参数,就可以在mutation修改state数据,state里数据是响应式的,就可以传递给页面,进行同步更新。当state里的数据需要经过计算时,可以使用getter属性,获取计算值。

    4.优势:

    vuex是要遵循一定的规则,把需要共享的数据抽取出来,在store里可以直接追踪 状态的变化过程,易于调试和管理。

    减少ajax请求数,有些数据可以直接从内存中的state获取。

    5、缺点:

    刷新浏览器,state会变为初始状态。

    解决方法:配合webStorage或者cookie这样的本地存储手段。

    用localstorage来存储需要持久化的数据,启动vuex的时候直接从localStorage获取持久化的数据。

     

    6.vue-bus和vuex:

    bus是一个公共的vue实例,用来专门处理emit和on事件。

    对于一些最父级上的提示遮罩,加载弹层比较适合,因为最父级不会被销毁,eventBus不会被重复地绑定和解绑。

    问题:bus事件被多次触发。页面路由的时候,原有页面中的bus事件并没有被注销,依然隐藏在程序中。所以要在组件的beforeDestory钩子中注销。

    vuex使用store对象来来做全局数据处理,制定了处理的原则和方法,统一管理。适合数据量大且复杂的项目。

    对于深层级组件的通信,由于组件会被经常销毁和重建,就需要不断地建立和移除eventBus,会增大性能的开销,这时比较适合vuex。

  • 相关阅读:
    Computer Science Theory for the Information Age-4: 一些机器学习算法的简介
    Computer Science Theory for the Information Age-3: 高维空间中的高斯分布和随机投影
    Computer Science Theory for the Information Age-2: 高维空间中的正方体和Chernoff Bounds
    PrestaShop 1.7 如何添加网站的跟踪代码
    PrestaShop 1.7 创建税单的时候中文显示方框
    PrestaShop 1.7 首页菜单如何进行调整
    PrestaShop 1.7 如何启用 debug 模式
    PrestaShop 1.7.6 在访问分类的时候提示错误
    PrestaShop 1.7 安装完成后后台能进去,前台不行
    Maven 服务器如何设置用户名和密码
  • 原文地址:https://www.cnblogs.com/annie211/p/12661848.html
Copyright © 2011-2022 走看看