zoukankan      html  css  js  c++  java
  • vuex(2)

    vuex: dispatch commit 区别

     

    dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.dispatch('action方法名',值)

    commit:同步操作,写法:this.$store.commit('mutations方法名',值)

     

     

    直接修改state dispatchcommit来修改state的差异:

    . 使用vuex修改state时,有两种方式:

    1)可以直接使用 this.$store.state.变量 = xxx;
    2)this.$store.dispatch(actionType, payload或者:  this.$store.commit(commitType, payload)

     

     

    . 异同点

      1)共同点: 能够修改state里的变量,并且是响应式的(能触发视图更新)
      2)不同点:
          若将vue创建 store 的时候传入 strict: true, 开启严格模式,那么任何修改state的操作,只要不经过

          mutation的函数,vue就会  throw error :    [vuex] Do not mutate vuex store state outside mutation handlers

     

     

    路由携参方式:
    a.query // 携带的参数会在地址栏中显示
    this.$router.push({ name: 'recruit', query: { id: 123 }})
    取值方式:this.$route.query
    弊端:页面之间跳转可正常使用,但刷新时,所有参数类型会被转换导致参数错误

    b.params // 携带的参数不会在地址栏中显示
    this.$router.push({ name: 'recruit', params: { id: 123 }})
    取值方式:this.$route.params.id
    弊端:页面刷新后参数消失

    c.路由中定义参数 // 携带的参数会在地址栏中显示
    this.$router.push({ path:`/detail/${id}`})
    取值方式:this.$route.params.id
    弊端:需要路由配置中对应设置携带参数

     
    但行好事,莫问前程。
  • 相关阅读:
    三列自适应等高且中列宽度自适
    两列高度自适应(转)
    Transform 1
    跟我一起透彻理解template模板模式
    走进C++程序世界-----operator new delete 重载
    linux下maven的安装
    JavaScript权威指南第01章 JavaScript 概述
    切勿辜负青春一场
    C++ 模板应用 实现一个Queue 队列
    从头认识java-14.4 Java提供的数组的有用功能(2)
  • 原文地址:https://www.cnblogs.com/txhy/p/11483518.html
Copyright © 2011-2022 走看看