Vue经验总结

FrancisSoung 发布于2019-08-23 11:48 / 1447人阅读

摘要：题记前段时间时隔个月重新拾起了，的太好用了。一初体验以前用惯了的然后突然切换到的真的有点不习惯。可以包含任意异步操作。至于剩下的目前好像还没有怎么用到，就下次用了体验了过后再说吧。

题记：前段时间时隔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和相似，但是：

Action 提交的是 mutation，而不是直接变更状态。

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
    })
}

这样是不行的，具体为什么我也不是很清楚，求大佬讲解

未完待续...

专线服务私有云经验总结服务器迁移经验总结笔试经验求职经验

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97491.html

2019前端秋季社招面试经历总结（三年经验）

摘要：经历月份开放的简历，收到了蛮多询问和面试，算是招人旺季，需要跳槽的小伙伴抓住机会。现在是面试了家公司左右，有些高频问题会标记次数总次数，可供大家参考。最后祝大家面试顺利，拿到心仪的，写错的地方请不吝赐教，谢谢。经历 7月份开放的简历，收到了蛮多询问和面试，算是招人旺季，需要跳槽的小伙伴抓住机会。一开始广泛看面试题，没抓住重点复习，有很多平时也没怎么用到，导致一开始面试的时候，问的问题...

Kross 2019-08-02 15:41 评论0 收藏0
2019前端秋季社招面试经历总结（三年经验）

摘要：经历月份开放的简历，收到了蛮多询问和面试，算是招人旺季，需要跳槽的小伙伴抓住机会。现在是面试了家公司左右，有些高频问题会标记次数总次数，可供大家参考。最后祝大家面试顺利，拿到心仪的，写错的地方请不吝赐教，谢谢。经历 7月份开放的简历，收到了蛮多询问和面试，算是招人旺季，需要跳槽的小伙伴抓住机会。一开始广泛看面试题，没抓住重点复习，有很多平时也没怎么用到，导致一开始面试的时候，问的问题...

DevWiki 2019-08-30 15:44 评论0 收藏0
2019前端秋季社招面试经历总结（三年经验）

摘要：经历月份开放的简历，收到了蛮多询问和面试，算是招人旺季，需要跳槽的小伙伴抓住机会。现在是面试了家公司左右，有些高频问题会标记次数总次数，可供大家参考。最后祝大家面试顺利，拿到心仪的，写错的地方请不吝赐教，谢谢。经历 7月份开放的简历，收到了蛮多询问和面试，算是招人旺季，需要跳槽的小伙伴抓住机会。一开始广泛看面试题，没抓住重点复习，有很多平时也没怎么用到，导致一开始面试的时候，问的问题...

solocoder 2019-08-26 10:30 评论0 收藏0
项目经验总结

摘要：项目中前端开发问题经验总结下的安全限制问题问题描述数据看板中的数据大部分都是实时数据或前一天统计的历史数据，因此这边后端考虑采用来实时和定时推送数据来保证数据的实时性和有效性。项目中前端开发问题经验总结 ie下websocket的安全限制问题问题描述：数据看板中的数据大部分都是实时数据或前一天统计的历史数据，因此这边后端考虑采用websocket来实时和定时推送数据来保证数据的实时...

William_Sang 2019-08-23 15:56 评论0 收藏0
Python面试经验总结，面试一时爽，一直面试一直爽！

摘要：面试的心得体会简历制作我做了两份简历，用两个手机账号，两个简历名字，分别在各个招聘网站投了双份简历，一个是数据分析的简历一个是全栈开发的简历，我真正接触快年，不管是学习还是工作学到的东西，这两年大概掌握了前端爬虫数据分析机器学习技术， showImg(https://upload-images.jianshu.io/upload_images/13090773-b96aac7e974c...

gxyz 2019-07-31 10:28 评论0 收藏0