Vue经验总结

2024年3月26日 151次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞