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
    弊端:需要路由配置中对应设置携带参数

     
    但行好事,莫问前程。
  • 相关阅读:
    移动端应用rem定义相对长度单位
    ionic4(angular) 生成browser平台的(webApp)在手机QQ浏览器不更新页面
    解决 git bash命令行执行git命令一直报错 segmentation fault
    MACBOOK OSX升级到10.15.3 Catalina 后 photoshop CS6(32位)不能用了
    自制操作系统笔记-第三章
    自制操作系统笔记-第2章
    自制操作系统笔记-第一章
    Vue学习笔记
    解决 MAC 终端上每次打开新窗口手动执行source ~/.bash_profile导出环境变量
    HTTPS的安全性
  • 原文地址:https://www.cnblogs.com/txhy/p/11483518.html
Copyright © 2011-2022 走看看