V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
zhangchaojie
V2EX  ›  Vue.js

vue3 学习和项目改造,关于 vuex 的问题请教

  •  
  •   zhangchaojie · 2020-02-09 18:15:22 +08:00 · 6088 次点击
    这是一个创建于 1748 天前的主题,其中的信息可能已经有所发展或是发生改变。

    想要早点学习 Vue3,所以用 composition api 改一下项目,但是刚开始就遇到了麻烦:setup 函数 this 指向 null,所以 vuex 中 this.$store、mapState、mapMutations 都不能用了,有点尴尬,大家怎做的,要用 inject 和 provide 重做状态管理吗?😳

    45 条回复    2021-01-05 09:50:17 +08:00
    randyo
        1
    randyo  
       2020-02-09 18:20:55 +08:00 via Android
    发布了吗,还没看过 vue3😂
    noe132
        2
    noe132  
       2020-02-09 18:31:48 +08:00
    推荐自己写 service,将 数据和操作 封装成一个独立单元

    // xxxService.ts
    const createxxxService = () => {
    const state = reactive({......})
    const action1 = () => ......
    const action2 = () => ......

    const computed1 = computed(() => ...)

    return { state, action1, action2, computed1 }
    }

    export const xxxService = createxxxService()

    然后在需要此 store 的地方 import { xxxService } 进来,通过 xxxService.state 访问相应的值,xxxService.action()调用相应的函数。比较像 angular 的 service。只不过是手动 import。

    vuex 在 ts 里极其不友好,所以一开始就没考虑 vuex。inject provide 也不推荐使用
    zhangchaojie
        3
    zhangchaojie  
    OP
       2020-02-09 18:51:00 +08:00 via iPhone
    @noe132 收到,好好学习一下
    zhangchaojie
        4
    zhangchaojie  
    OP
       2020-02-09 18:53:06 +08:00 via iPhone
    @randyo 有个尝鲜版 @vue/composition-api
    sodatea
        5
    sodatea  
       2020-02-09 18:55:37 +08:00
    可以先尝试一下 pinia https://github.com/posva/pinia/tree/next
    Jat001
        6
    Jat001  
       2020-02-09 19:00:34 +08:00   ❤️ 3
    实在搞不懂前端界为什么这么激进,没几年就发布一个大版本,是开发速度更快了还是学习成本变低了?
    工作这么多年,我明白了一个道理,那就是你的用户、你的老板甚至是你的领导都不关心你在用什么框架,他们只关心能否按时完成任务、少出 bug、不要给其他人挖坑、做出来的东西效果怎么样,无论是你用的是最新的技术还是上一代的技术,只要结果一样,就没人关心过程。
    而团队项目更是没人想把底层框架从老版本迁移到最新版,一堆新需求源源不断,谁没事干去迁移框架啊,算绩效吗?你这边在重构,那边还在开发新需求,一堆冲突谁来合并,一堆测试谁来修,出了 bug 算谁的?
    manami
        7
    manami  
       2020-02-09 19:05:32 +08:00
    vue3 不是还没发布吗?
    hyy1995
        8
    hyy1995  
       2020-02-09 19:12:08 +08:00
    玩玩源码就行了,这还没发布呢没必要那么急。。。
    zhangchaojie
        9
    zhangchaojie  
    OP
       2020-02-09 19:25:37 +08:00 via iPhone
    @Jat001 不学习新东西,到面试的时候就尴尬了,不管怎么样都得学
    zhangchaojie
        10
    zhangchaojie  
    OP
       2020-02-09 19:26:08 +08:00 via iPhone
    @manami 有个尝鲜版 @vue/composition-api
    zhangchaojie
        11
    zhangchaojie  
    OP
       2020-02-09 19:26:21 +08:00 via iPhone
    @hyy1995 早点吃螃蟹🦀
    zhangchaojie
        12
    zhangchaojie  
    OP
       2020-02-09 19:27:28 +08:00 via iPhone
    @sodatea 多谢,马上用用
    Jat001
        13
    Jat001  
       2020-02-09 19:39:11 +08:00
    @zhangchaojie #9 面试你的人也不一定了解新版本,你不讲也不会问你,大家都忙着怼需求呢
    imnaive
        14
    imnaive  
       2020-02-09 19:44:51 +08:00
    存到 localstorge 可行么?
    zhangchaojie
        15
    zhangchaojie  
    OP
       2020-02-09 19:52:57 +08:00
    @imnaive 要动态变化啊,不行,上面大佬给的链接可以,https://github.com/posva/pinia/tree/next
    pecopeco
        16
    pecopeco  
       2020-02-09 19:52:57 +08:00 via Android
    pecopeco
        17
    pecopeco  
       2020-02-09 19:59:15 +08:00 via Android
    @Jat001 如果不是尤大、Misko Hevery、facebook 等等这些“激进”的先驱者,前端可能到现在还在用 jq 去做 dom 操作,遇到复杂的交互逻辑熬白了头
    zhangchaojie
        18
    zhangchaojie  
    OP
       2020-02-09 20:09:51 +08:00
    @Jat001 现在面试肯定要问,vue2 的响应式原理是什么,vue3 的响应式原理是什么,为什么要有这个变化,必问,如果面试 Vue 的岗位
    Jat001
        19
    Jat001  
       2020-02-09 20:31:12 +08:00
    @pecopeco #17 我们说的不是一回事,大部分公司都不是互联网技术驱动的,华为 京东 ebay 不都还在用 jquery 搞吗。我的观点是,前端技术对大部分公司来说都不是核心竞争力,这些公司没有动力去频繁更新前端技术,激进的版本更新策略只能让这些公司对 vue 望而却步
    Jat001
        20
    Jat001  
       2020-02-09 20:43:56 +08:00
    @zhangchaojie #18 现在前端岗位都已经具体到某一框架了吗……反正我面试后端从来没听说过只用一门语言的,工作中经常需要现学现卖,小公司不会分那么细没办法。我不是反对学习新技术,只是觉得一个框架而已,如果你对 2.x 了如指掌,面试官是不会在乎你没学 3.x 的,毕竟谁也不会在生产环境随便用新技术的。还是那句话,旧项目除非万不得已,没人愿意做大版本迁移,吃力不讨好的事情。
    zhangchaojie
        21
    zhangchaojie  
    OP
       2020-02-09 21:06:19 +08:00
    @Jat001 但事实,比如你面试 Java 岗位,你是不会问 PHP 相关特性的,也不会因为他 PHP 写的好,就录用他做 Java,你现在面试前端,不再会问 jQuery,不会因为他 jQuery 写的非常 6,但不会 react、Vue 能现代框架而录用他
    ybh8341
        22
    ybh8341  
       2020-02-09 21:08:14 +08:00 via Android
    vue 都出 3 了?
    Jat001
        23
    Jat001  
       2020-02-09 21:34:52 +08:00
    @zhangchaojie #21 没让你不要学现代框架啊,我的观点是不要盲目追新,你现在学到的东西可能没几个月就过时了
    zhangchaojie
        24
    zhangchaojie  
    OP
       2020-02-09 22:08:30 +08:00 via iPhone
    @ybh8341 体验版,不过也快出了
    zhangchaojie
        25
    zhangchaojie  
    OP
       2020-02-09 22:10:11 +08:00 via iPhone
    @Jat001 我的观点是,如果发现值得学,就赶紧学。总是落后与人,等技术成熟了再学,你永远也不是这个领域的专家
    lxml
        26
    lxml  
       2020-02-09 22:34:42 +08:00
    看 vue 的 github roadmap evan you 说 2020 Q1 release, 这次应该准了吧,虽然已经延期两次。
    Jat001
        27
    Jat001  
       2020-02-09 23:16:21 +08:00
    @zhangchaojie #25 额,说句不好听的,大部分程序员都是在搬砖而已,混得好点的往管理或网红方向转,混得不好的中年危机,能成为专家的少之又少,而且学习一个框架的 API 并不能成为前端领域的专家吧?

    再回到我最初的观点上来,大部分公司都不是前端技术驱动的,vue3 发布后你看有几家公司会把现有项目迁移到新版上来,新项目用上 vue3 也得等几个月稳定了才会上。假如你是一家中小公司的 leader,人手不够,需求都做不完,你会把框架迁移放进排期里?新版本刚出来大家都不熟,还一堆坑,你敢把它用在公司的核心项目上?

    我是站在普通公司的角度去看待这个问题的,技术的快速迭代对追求稳定的企业用户来说不是好事情。如果你是一个 vue 插件的作者,为了保证插件跟上 vue 的版本迭代,当然需要关注新版本的发展。但如果你是像我一样不是搞前端的,只是偶尔用 vue 写点页面,你是没有动力去学一个还没发布的新版本的。

    还有我最初的问题是前端界为什么这么激进,这个激进不是指从 jquery 切换到 vue,而是后来的这些现代框架的更新策略,反正之前 vue2 的时候,迁移遇到了一堆问题,最后干脆重写了,这还只是我们后端内部用的管理页面,据我所知,前端组的项目页面压根就没做迁移。
    sodatea
        28
    sodatea  
       2020-02-10 00:24:45 +08:00
    @Jat001
    1. Vue 大版本更新得已经算很慢了,Vue 2 正式版到现在已经三年半了(作为对比,Java 框架 Spring 大版本更新周期大约在 3-4 年),这怎么能说是激进?
    2. 更新大版本不是为了更新而更新,而是技术演进的必然;
    3. 发布了新的大版本,不代表旧的版本旧不能用了,如果旧的项目用的没问题,完全可以接着用;
    duan602728596
        29
    duan602728596  
       2020-02-10 01:10:47 +08:00 via iPhone
    京东用的是自研的 Nervjs……
    Jat001
        30
    Jat001  
       2020-02-10 01:26:17 +08:00
    @sodatea #28
    1. 我说的激进不是更新时间,而是向后兼容,少点 breaking change。就更新时间来说,3.x 确实正常,但 1.x 到 2.x 只用了一年
    2. 我同意技术演进,但用户买不买账就另说了,最著名的例子恐怕是 python 2 -> 3 了吧,python 3 发布了差不多十年,18 年的时候,还有项目在用 python 2,python 2 发布二十年后才停止维护。要不是社区为了 python 2 和 3 的兼容,发布了大量 backport 包,恐怕现在还有项目不会迁移吧
    3. 旧版本能用是能用,但不维护了啊,旧版本放在那越来越没人敢动,时间久了老版本的资料都找不到了。所以又回到前面说的了,多做点向后兼容,少点 breaking change,迁移省事用户也就愿意做了
    Jat001
        31
    Jat001  
       2020-02-10 01:28:42 +08:00
    @duan602728596 #29 pc 端是 jquery-1.6.4 啊
    mxT52CRuqR6o5
        32
    mxT52CRuqR6o5  
       2020-02-10 02:02:51 +08:00 via Android
    mxT52CRuqR6o5
        33
    mxT52CRuqR6o5  
       2020-02-10 02:08:00 +08:00 via Android
    @Jat001 不维护是不加新 feature 了,bug 一般还是会修的,jquery1 这么老的库文档很容易就找到啊,在前端领域,我很同意老项目用老版本这个观点
    mxT52CRuqR6o5
        34
    mxT52CRuqR6o5  
       2020-02-10 02:16:09 +08:00 via Android
    @Jat001 就比如 vue3 是依赖 js 的 Proxy 的,即使是以后 vue3 稳定了,新项目是否要上 vue3 都得好好掂量掂量的,不是说新了就要用,web 前端和后端不一样的,js 代码跑在什么浏览器下通常来说都是不可控的,后端为了项目的可持续维护性会一直跟版本,但前端很多时候不会这么做
    Jat001
        35
    Jat001  
       2020-02-10 02:23:04 +08:00
    @mxT52CRuqR6o5 #33 vue 没有多分支版本啊,新的版本一正式发布,旧版本就不管了啊。文档是容易找,其他资料呢,不是所有问题文档里都写了
    @mxT52CRuqR6o5 #34 不关心那么多,反正不是前端,等 vue 3 稳定了再说
    duan602728596
        36
    duan602728596  
       2020-02-10 10:05:34 +08:00 via iPhone
    不是了...你去凹凸实验室看看就知道了,早就重构了
    zhwithsweet
        37
    zhwithsweet  
       2020-02-10 11:16:27 +08:00
    @Jat001 #19 没有竞争力就创造竞争力,不然混吃等死?
    zhangchaojie
        38
    zhangchaojie  
    OP
       2020-02-10 16:17:26 +08:00
    @noe132 大佬,不太行,有报错,ref,reactive 等函数不能在 steup 函数外调用,export const xxxService = createxxxService(),这里调用函数后就不行了,但是不调用直接导出函数又会无法各个组件响应式
    Jat001
        39
    Jat001  
       2020-02-10 16:56:03 +08:00 via iPhone
    @duan602728596 反正打开京东首页的源码,里面就有 jquery
    Jat001
        40
    Jat001  
       2020-02-10 17:03:05 +08:00 via iPhone
    @zhwithsweet 没在小公司干过吧?还是那句话,需求都做不完呢,谁有那闲工夫重构代码?
    noe132
        41
    noe132  
       2020-02-10 18:14:02 +08:00
    reactive 怎么就不能在 setup 外使用了
    https://codesandbox.io/s/morning-rgb-ywu52
    ranjiayu
        42
    ranjiayu  
       2020-02-10 18:20:10 +08:00
    @Jat001 很有道理,赞同
    dcleaf
        43
    dcleaf  
       2020-03-13 11:53:57 +08:00
    vue3, 不都用 root 么
    jerry4718
        44
    jerry4718  
       2020-08-21 14:15:48 +08:00
    @zhangchaojie 大佬,我看了一下,这个思路应该是比较适合提取公共逻辑,类似 react 的自定义 hook,我赞同“inject provide 也不推荐使用”这句,但是也没有找到其他方案啊
    CallMeSoul
        45
    CallMeSoul  
       2021-01-05 09:50:17 +08:00
    vuex 现在出了 vue3 版本的了 https://next.vuex.vuejs.org/
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2311 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 16:04 · PVG 00:04 · LAX 08:04 · JFK 11:04
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.