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

请问使用 Vuex 的好处究竟在哪里?

  •  
  •   chenluo0429 · 2020-05-14 15:53:00 +08:00 · 4977 次点击
    这是一个创建于 1683 天前的主题,其中的信息可能已经有所发展或是发生改变。
    集中管理,状态可预测这些使用全局对象一样可以做到。那么对比全局对象 Vuex 的收益究竟在哪里呢?
    17 条回复    2021-10-26 00:10:05 +08:00
    drydiy
        1
    drydiy  
       2020-05-14 16:22:04 +08:00
    社区维护,大家都是用的同一套方案。新人进来就会用。
    你使用全局对象做的比 vuex 优秀的话可以自己做,团队没能力维护的话不如 vuex 来的方便。
    nianyu
        2
    nianyu  
       2020-05-14 16:25:25 +08:00
    我一直把它理解成全局对象用
    murmur
        3
    murmur  
       2020-05-14 16:27:28 +08:00
    vuex 可以绑定模板,全局变量不能,得自己 watch
    guolaopi
        4
    guolaopi  
       2020-05-14 17:26:49 +08:00
    @murmur #3
    +1

    其实本质上就是当“全局变量”用的,只不过优化了一些流程(如改变数据和获取数据)。

    vuex 的 actions 是异步的且会按顺序执行,
    从 action => mutation => getters 这一个流程保证在同时修改一个数据时,数据几乎不会被污染(没具体测试过)。

    另外可以通过 computed 来实现模板中的双向绑定,全局变量不可以,要使用 watch 方式
    ( watch 我记得性能好像差一点?也可能我记错了?望有大佬解答关于 watch 和 computed 性能差异


    (其实应该也可以自己实现一套机制,来解决多次不同时修改一个全局变量的值后结果是期望值,
    且实现一套机制挂载到根示例下使其也可以通过 computed 来双向绑定,但是实现这么多的话不等于自己做一套 vuex 吗)
    rabbbit
        5
    rabbbit  
       2020-05-14 17:35:48 +08:00
    就是把全局对象(state)和修改全局对象的代码(mutation action)集中在一起,便于管理 /调试.
    vuex 禁止直接修改 state, 多人合作的时候,如果谁都能改全局对象的话,就很难调试了.
    修改全局对象时候, 还能用 vue devtools 跟踪流程,便于调试.
    rabbbit
        6
    rabbbit  
       2020-05-14 17:41:46 +08:00
    不过,因为不建议在 action 里修改 state, 所以很容易写出这种代码...

    mutations: {
    setName(state, name) {
    state.name = name;
    },
    },
    actions: {
    setName({ commit }, name) {
    commit('setName', name);
    },
    },
    zhuweiyou
        7
    zhuweiyou  
       2020-05-14 18:00:55 +08:00
    全局变量没问题,但是它不会 “响应”,就是 “数据发生改变,视图不会自动刷新”

    你要自己写 “watch” 的逻辑
    namelosw
        8
    namelosw  
       2020-05-14 18:13:41 +08:00
    > 全局对象一样可以做到

    我觉得你就是想一想,根本没仔细试过是不是可行。
    JayLin1011
        9
    JayLin1011  
       2020-05-14 19:55:52 +08:00
    Vuex 屬於 Vue 生態全家桶的一部分,有很棒的功能和使用場景,但是不是必須的,你不用也可以,因為「 Flux 架构就像眼镜:您自会知道什么时候需要它。」。
    phpcxy
        10
    phpcxy  
       2020-05-15 09:11:59 +08:00
    @rabbbit #6 如果在 vue 里面修改 state,可以使用 store.commit()吧
    Doracis
        11
    Doracis  
       2020-05-15 09:24:41 +08:00   ❤️ 1
    团队项目看 vuex 就很省心,比如权限或者登录状态,即使刚进项目,也可以直接拿来用,节省时间,不用重新读一遍代码
    ccyu220
        12
    ccyu220  
       2020-05-15 09:39:39 +08:00
    个人理解是,可安全异步操作的全局对象。
    SilentDepth
        13
    SilentDepth  
       2020-05-15 14:21:26 +08:00   ❤️ 1
    Vuex 是一个「解决方案」,或者「业务模型」。如果你就那么一两个全局状态,引用也不多,用谁都差不多。但等你状态再多一点,衍生逻辑也多一点,即使你不用 Vuex 也会不由自主地搞一个类似的「全局状态管理器」。Vuex 就是给你省了自己造轮子的工夫。
    faceRollingKB
        14
    faceRollingKB  
       2020-05-23 20:02:18 +08:00
    全局变量+跟 vue 状态系统对接
    缺点:state 、getters 、mutation 其实是一个 property 的 value 、get 、set 定义,vuex 把这几个属性描述分开了,写起来很麻烦,另外在架构设计过程中跟全局变量有着一样的问题,就是无法适应多变的组件、状态关系,例如部分组件需要用到部分公共状态,实现起来就很麻烦,要自己控制状态的生命周期、命名空间
    jabala
        15
    jabala  
       2020-06-03 23:07:36 +08:00 via iPhone   ❤️ 1
    vuex 跟把全局数据挂到根组建,然后用$parent 有什么区别
    96412hj
        16
    96412hj  
       2020-07-02 10:08:41 +08:00
    我一般在 vuex 中处理异步的数据,比如 ajax,utils 文件夹 format 数据,.vue 文件调用,使用 vuex 中的 module,确实挺香的,我自己觉得代码梳理起来很方便
    wisetc
        17
    wisetc  
       2021-10-26 00:10:05 +08:00
    存储全站数据。缓存。reactive. accessible method. modules. pure.
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5441 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 05:46 · PVG 13:46 · LAX 21:46 · JFK 00:46
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.