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

    使用方法

  • 相关阅读:
    SQL学习
    FOR XML PATH
    IOS学习网址
    weak nonatomic strong等介绍(ios)
    UVALive3045 POJ2000 ZOJ2345 Gold Coins
    UVA713 UVALive5539 POJ1504 ZOJ2001 Adding Reversed Numbers
    UVA713 UVALive5539 POJ1504 ZOJ2001 Adding Reversed Numbers
    UVA439 POJ2243 HDU1372 ZOJ1091 Knight Moves【BFS】
    UVA439 POJ2243 HDU1372 ZOJ1091 Knight Moves【BFS】
    UVA10905 Children's Game
  • 原文地址:https://www.cnblogs.com/allenzhang-920/p/10993331.html
Copyright © 2011-2022 走看看