• Vuex状态数据源state


    (1)单一状态树

        Vuex 使用单一状态,用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着,每个应用将仅仅包含一个 store 实例。

        单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。

        单状态树和模块化并不冲突——之后介绍如何将状态和状态变更事件分布到各个子模块中。

    (2)入口文件状态注入

        Vuex 通过 store 选项,提供了一种机制将状态从根组件“注入”到每一个子组件中(需调用 Vue.use(Vuex)),即在main.js文件中引入该文件,在文件里面添加 import store from ‘./store’;,再在vue实例全局引入store对象

        

        通过在根实例中注册 store 选项,该 store 实例会注入到根组件下的所有子组件中,且子组件能通过 this.$store 访问到。

    (3)mapState 辅助函数

        表面意思:mapState是state的辅助函数.这么说可能很难理解

        抽象形容:mapState是state的语法糖,可能你根本不了解什么叫做语法糖。事实上这里说的语法糖有自己的定义,什么是语法糖?

        这里对语法糖的理解就是,用之前觉得,我明明已经对一种操作很熟,用了一段时间后,真香!

        

       实际作用:当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性,让你少按几次键。在使用mapState之前,要导入这个辅助函数.

    import { mapState } from 'vuex'

       然后就是使用方式了,下面是两种写法的对比

       

    (4)组件仍然保有局部状态

         使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试,但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件,最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。

     .

  • 相关阅读:
    网上Silverlight项目收集
    在Silverlight页面里显示HTML的免费控件下载(附使用方法代码)
    Silverlight SNS项目
    Visual Studio 2010下的RIA开发,Silverlight 4线下技术交流会期待您的参与!
    Windows7硬件展示与客户端信息收集
    Silverlight版的神奇罗盘,仿Google的Flash神奇罗盘
    (解题思路)Entity Framework 如动态创建表或者列
    (学)这些年来的几宗罪
    (学)在SQL2005中使用分区表技术
    (医)有痔青年的福音
  • 原文地址:https://www.cnblogs.com/fightjianxian/p/11324196.html
Copyright © 2020-2023  润新知