Vue经验总结

2023年2月3日 213次阅读 来源: Pjee

题记：前段时间时隔8个月从新拾起了vue，vue的太（yi）好（jing）用（wang）了（wan）。

一、Vuex初体验

之前用惯了react的dva然后倏忽切换到vue的vuex真的有点不习惯。

1、Store

这个是vuex中的大哥大，什么都归它管（state、mutations、getter、action、module），你能够把它理解为一个堆栈（官方文档也是这么说的）

// 建立stroe
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

2、State

每一个Stroe中都会有这么一个状况树、关于vue来讲他是全局的，关于store来讲他是唯一的，我们能够把它理解为堆栈中的货色，当客户（vue）中想要掏出堆栈（store）中的货色（state），很简单this.$stroe.state.test

3、Mutation

mutation 必需是同步函数
变动 Vuex 的 store 中的状况的唯一要领是提交 mutation。这个我们能够把它比喻为一个定单（Mutation），当客户（vue）须要转变堆栈（store）中的货色（state）时，我们就能够经由过程这个要领去转变，然则这个要领在当地是不能被直接挪用的，你须要以响应的 type 挪用 store.commit 要领：

// 无参数提交
store.commit('increment')
// 有参数
store.commit('increment', {
  amount: 10
})
// OR
store.commit({
  type: 'increment',
  amount: 10
})

实在这一点和dva有点类似

4、Action

这个和Mutation和类似，然则：

  1. Action 提交的是 mutation，而不是直接变动状况。
  2. Action 能够包括恣意异步操纵。

而且actions是与Mutation的触发要领也差别，它是用的store.dispatch(确认过眼神)，而且它能够挪用actions，讲道理它是比mutation高一个品级的。

至于剩下的Getter、Module现在彷佛还没有怎样用到，就下次用了体验了事后再说吧。

二、Vuex中的辅佐函数

在vuex中所有的辅佐函数都只要一个目标，轻易你我他

1、mapState

当我们须要在一个页面中猎取store中的多个状况时，怎样办

// bad
this.$store.state.a
this.$store.state.b
this.$store.state.c
// good
computed:{
    ...mapState({
        a:state=>state.a,
        b:state=>state.b,
        c:state=>state.c
    })
}

然则这个处所有一个坑，假如a是一个对象

a:{
    d:1,
    e:{
        f:2
    }
}
computed:{
    ...mapState({
        f:state=>state.a.e.f
    })
}

如许是不可的，详细为何我也不是很清晰，求大佬解说

未完待续…

    原文作者：Pjee
    原文地址: https://segmentfault.com/a/1190000016294183
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞