• Vuex学习笔记


    Vuex和全局对象的不同:

    1.Vuex的状态存储是响应式的。当Vue组件从store中读取状态的时候,若store中的状态发生变化,那么相应的组件也会相应地得到高效的更新。

    2.不能直接改变store中的状态。改变store中的状态的唯一途径就是显示地提交(commit)mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

    1.State


    1.Vuex 使用单一状态树,即每个应用将仅使用一个store实例。

    2.Vuex通过store选项,提供了一种机制将状态从根组件注入到每一个子组件中。

    3.借助mapState函数帮我们生成计算属性,少按几次键盘。

    4.使用对象展开运算符合并对象。?----如何使用

    5.在某些情况下,有些状态严格属于单个组件,这时候状态还是作为组件的局部状态好,没有必要将所有的状态都放入Vuex,否则会使得代码变得冗长和不直观。

    2.Getter


    1. 有时候需要从state中派生出一些状态供组件使用,可以在store中设置getters属性(类似于组件的计算属性),组件通过$.store.state.getter.访问使用。

    2.getter也可以接受其他getter来作为第二个参数使用。

    3.可以通过getter返回一个函数,给getter传参。

    4.通过mapGetters将stroe中的getter映射到局部计算属性。

    3.Mutation


    1.状态改变的唯一方法是提交mutation,通过在vue中调用$.store.commit来调用相应的mutation修改相应的状态。

    2.提交载荷:commit中可以传入额外的参数,来为mutation提供参数,通常这个参数是一个对象。

    3.对象风格的commit:commit可以采用对象风格

      

    4.可以使用常量来代替Mutation事件类型 

    5.mutation必须是同步函数

    6.可以使用mapMutations辅助函数将组件中的methods映射为store.commit

    4.Action


    1.actions属性中可以定义异步操作

    2.通过$.store.dispatch出发相应的方法

    3.可以使用mapActions辅助函数将组件中的methods映射为store.dispatch调用

    4.结合回调函数,可以组合使用action(ES6 promise ?)

    5.Module


    1.应用的所有状态集中到一个store中管理时store对象会变得非常臃肿,为了解决这个问题,vuex允许使用module分模块 。

    2.命名空间:通过添加namespated:true是模块成为带命名空间的模块,这样所有模块内部的getter、action、mutation都会根据模块注册的路径调整命名 。

    3.使用了命名空间后getter、mutation和action的触发:

      a. getter的第三个参数为rootState,第四个参数为rootGetters,这样在getter中就可以通过rootState和rootGetters访问根节点的信息,而想触发本身的getter和原来一样。

      b. 若想在全局空间内分发action或提交mutation只需要在dispatch或commit的第三个参数中添加{root:true}即可

    4.在带命名空间的模块中注册全局 action,只需要在action中添加root:true,并将action的定义放在函数handler中即可

    5.对于自己开发的插件如果提供了模块,可以给定插件的参数命名对象来允许用户自己制定命名空间。

    6.模块动态注册:registerModule() 

      

  • 相关阅读:
    RIGHT-BICEP单元测试——“二柱子四则运算升级版”
    个人项目之“二柱子四则运算升级版”(续)
    个人项目之 “二柱子四则运算”升级版
    “进度条”博客
    课后实验3--四则运算3
    构建之法阅读笔记01
    第二周学习进度
    四则运算2单元测试
    课后实验2--四则运算2
    课后实验1--四则运算
  • 原文地址:https://www.cnblogs.com/lauzhishuai/p/10883388.html
Copyright © 2020-2023  润新知