zoukankan      html  css  js  c++  java
  • vuex基础

    vuex核心内容

    state : 一个对象,专门用来存放多个组件共享的数据

    // 组件中获取vuex保存的state通过 this.$store.state.xxx
    console.log(this.$store.state.num)

    mutations: 一个对象,存放的是函数,函数的作用是专门用来修改state中的数据

    // 组件中触发mutations中的函数通过 this.$store.commit('mutations中的函数名')
    <el-button @click="$store.commit('addNum')">+1</el-button>

    actions: 一个对象,存放的也是函数,函数的作用:1. 触发mutations对象中的函数;2. 可以在里面发送异步请求

    // 组件中触发actions中的函数通过 this.$store.dispatch('actions中的函数名')
    <el-button @click="$store.dispatch('triggerAddNum')">+1</el-button>

    getters:一个对象,存放的是函数,只不过这个函数可以当作变量来使用,类似于计算属性

    // 组件中访问计算属性通过 this.$store.getters.getters对象中的函数名
    <el-tag type="danger">{{$store.getters.oddOrEven}}</el-tag>

    以上4个对象,都放在一个store对象中存起来

    获取多个state/mutations/actions/getters

    通过mapXXX方法(mapState方法/mapMutations方法/mapActions方法/mapGetters方法)

    mapState

    import { mapState } from 'vuex'
    ​
    ​
      computed: {
        // mapState()函数运行完之后得到的是一个对象{num: function(){}, username: function(){}}
        // ...{num: function(){}, username: function(){}}
        ...mapState(['num', 'username'])
      }

    mapMuatations

    import { mapMutations } from 'vuex'
    ​
      methods: {
         ...mapMutations(['addNum', 'minusNum'])
      }

    mapActions

    import { mapActions } from 'vuex'
    ​
      methods: {
        ...mapActions(['triggerAddNum', 'triggerMinusNum'])
      }
  • 相关阅读:
    手把手教你接入微信支付
    Java中的深浅拷贝问题,你清楚吗?
    DeimosC2 源码阅读
    一行命令删除空的docker images
    docker build出现交互式时区设置解决
    Amass项目源码阅读(整体架构)
    Prometheus时序数据库-磁盘中的存储结构
    Prometheus时序数据库-内存中的存储结构
    解Bug之路-ZooKeeper集群拒绝服务
    日常Bug排查-Nginx重复请求?
  • 原文地址:https://www.cnblogs.com/ressiry/p/10502608.html
Copyright © 2011-2022 走看看