V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
chenluo0429
V2EX  ›  Vue.js

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

  •  
  •   chenluo0429 · May 14, 2020 · 5923 views
    This topic created in 2176 days ago, the information mentioned may be changed or developed.
    集中管理,状态可预测这些使用全局对象一样可以做到。那么对比全局对象 Vuex 的收益究竟在哪里呢?
    17 replies    2021-10-26 00:10:05 +08:00
    drydiy
        1
    drydiy  
       May 14, 2020
    社区维护,大家都是用的同一套方案。新人进来就会用。
    你使用全局对象做的比 vuex 优秀的话可以自己做,团队没能力维护的话不如 vuex 来的方便。
    nianyu
        2
    nianyu  
       May 14, 2020
    我一直把它理解成全局对象用
    murmur
        3
    murmur  
       May 14, 2020
    vuex 可以绑定模板,全局变量不能,得自己 watch
    guolaopi
        4
    guolaopi  
       May 14, 2020
    @murmur #3
    +1

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

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

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


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

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

    你要自己写 “watch” 的逻辑
    namelosw
        8
    namelosw  
       May 14, 2020
    > 全局对象一样可以做到

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