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

 
posted @ 2019-09-07 22:31  浅夏、  阅读(131)  评论(0编辑  收藏  举报