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

    使用方法

  • 相关阅读:
    坑爹的PostgreSQL的美元符号(有时需要替换成单引号)
    DataFrame的apply用法
    Pytorch写CNN
    Pytorch分类和准确性评估--基于FashionMNIST数据集
    设置Mac终端、pip、Anaconda、PyCharm共用一套环境
    Python编程基本规范
    【转】动态规划:最长递增子序列Longest Increasing Subsequence
    动态规划--找零钱
    在线编写复杂的数学公式--EdrawMath
    pandas如何逐行需改DataFrame
  • 原文地址:https://www.cnblogs.com/allenzhang-920/p/10993331.html
Copyright © 2011-2022 走看看