zoukankan      html  css  js  c++  java
  • vuex相关

    vuex应用的核心就是store(仓库),“store”基本上就是一个容器,它包含着你的应用中大部分的状态。

    vuex和单纯的全局对象的不同点:

    1.vuex的状态存储是响应式的,store状态发生变化的时候,其对应的组件也会高效更新;

    2.不能直接修改store的状态,修改它唯一的途径就是显示的提交mutation,方便跟踪每个状态的变化。

    state

    vuex可以通过state获取相应状态,为了方便组件更好的调用可以写到计算属性里

    简单写法:

    import { mapState } from 'vuex'

    computed: {

      ...mapState(['age'])

    }

    getter

    用于从store中派生出一些状态,getter的返回值会根据它的依赖被缓存起来,只有当它的依赖值发生改变才会被重新计算

    使用方法类似state:

    this.$store.getters.isAdult

    简单写法:

    import { mapGetters } from 'vuex'

    computed: {

      ...mapGetters(['isAdult'])

    }

    mutation

    它是更改vuex的store中的状态的唯一方法。它类似于事件,每个mutation都有一个字符串的事件类型和一个回调函数。

    回调函数第一个参数是state,第二个参数是载荷(payload),载荷一般是个对象

    必须是同步函数

    其实直接赋值也可以修改状态,在vuex实例新增属性strict:true属性可以禁止直接修改,但是只能用于开发环境。

    简单写法:

    import { mapMutations } from 'vuex'

    methods: {

      ...mapMutations(['updateAge'])

    }

    mounted: function () {

      this.updateAge(26)

    }

    action

    类似于mutation,不同在于:

    action提交的是mutation,而不是直接更改状态

    action可以包含任意异步操作

    简单写法:

    import { mapActions } from 'vuex'

    methods: {

      ...mapActions(['updateAgeAsync'])

    }

    mounted: function () {

      this.updateAgeAsync({

        age: 12,

        time: 2000

      })

    }

    模块

    state

    使用方法

  • 相关阅读:
    python基础
    python中自定义的栈
    python内置函数
    python函数之可迭代对象、迭代器的判断
    关系型数据库
    数据库基础知识
    进程间通信--管道
    共享内存应用范例
    Win7秘籍 如何用压缩卷调整不合理分区
    KL-divergence
  • 原文地址:https://www.cnblogs.com/allenzhang-920/p/10993331.html
Copyright © 2011-2022 走看看