V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
crushJs
V2EX  ›  程序员

vue 的字段映射要放哪里,我和组里的人产生了分歧

  •  
  •   crushJs · 2018-04-16 16:42:27 +08:00 · 4261 次点击
    这是一个创建于 2419 天前的主题,其中的信息可能已经有所发展或是发生改变。
    公司在我来之前,定了一个规范
    然后规范是把一些固定(常用)的字段映射,比如 status=success,用 object 包起来放到根 vuex 的 root 中,然后每次都用 root 去映射显示字段
    // store
    const state = {
    mapToStatus = {
    success:‘已成功’,
    pending: '发送中',
    fail: '失败'
    }
    }

    // vue 组件
    <button> {{mapToStatus[status]}}</button>

    但是我的想法是放到 mixin 的 filter 里去做,因为总感觉把映射放到 store 里怪怪的。因为是刚入门 vue,不太清楚是怎么做的,真的有这种写法吗?

    我的想法是

    // mixin
    mapStatus(param) {
    switch (param) {
    case 'success':
    return '已成功'
    case 'pending':
    return '发送中'
    case 'fail':
    return '失败'
    }
    },

    // vue 组件
    <button> {{status | mapStatus}}</button>

    想问各位大神,哪种更合理一点?
    13 条回复    2018-04-17 09:38:08 +08:00
    LeungJZ
        1
    LeungJZ  
       2018-04-16 16:47:16 +08:00
    我的做法是:

    const STATES = {
    success:‘已成功’,
    pending: '发送中',
    fail: '失败'
    }

    放到 mixins 下面,
    export const getState = state => STATES[state]

    引入:
    import {getState} from 'xxx'

    getState(YourStateFromRemote)
    crushJs
        2
    crushJs  
    OP
       2018-04-16 16:50:00 +08:00
    @LeungJZ 我就是想知道,为啥要在 root 层多写一层字段映射呢? state 不应该是纯净的数据流吗?数据处理怎么放到 root 层了?
    LeungJZ
        3
    LeungJZ  
       2018-04-16 17:03:09 +08:00
    可以在 store 中分一个模块出来,专门管理这些静态资源,放不放 root 看个人习惯,反正一般都是通过 store.getters.xxx 去取的。
    safaring
        4
    safaring  
       2018-04-16 17:09:48 +08:00
    赞同你的想法
    crushJs
        5
    crushJs  
    OP
       2018-04-16 17:18:21 +08:00
    @safaring 但是就是很尴尬,互相找不到说服对方的方法.....因为也没有具体说哪种好
    goreliu
        6
    goreliu  
       2018-04-16 17:29:21 +08:00
    如果你不清楚自己的方法好在哪里,为什么要说服对方使用自己的方法呢?你可以换位思考一下。
    crushJs
        7
    crushJs  
    OP
       2018-04-16 17:30:11 +08:00
    @goreliu 因为我们双方都没有说服对方啊....他们能说服我我当然用啊...
    goreliu
        8
    goreliu  
       2018-04-16 17:32:16 +08:00   ❤️ 1
    @crushJs 规范就是没有异议优先采用的,如果你认为规范不合理,那你需要指出为什么不合理,然后怎样才合理,来说服规范的制定者或者采用者。可以设想一下你是规范的制定者,然后重新想一下这个问题。
    h1367500190
        9
    h1367500190  
       2018-04-16 17:38:07 +08:00
    如果只是实现类似于 i18n,或者只是普通的键值对,没必要放到 store 里吧,为什么不静态化呢?非要这样做的话,我觉得还不如做成插件以添加全局属性的方式实现
    tao1991123
        10
    tao1991123  
       2018-04-16 17:43:29 +08:00
    现在只有一种语言: 中文
    ```javascript
    mapToStatus = {
    success:‘已成功’,
    pending: '发送中',
    fail: '失败'
    }
    ```
    如果有其他语言 那就是
    ```javascript
    mapToStatus = {
    en: {
    success:‘ success ’,
    pending: 'pending',
    fail: 'fail'
    },
    cn: {
    success:‘已成功’,
    pending: '发送中',
    fail: '失败'
    } ,
    }
    ```

    简而言之你这就是一个简化版的 i18n 的需求,建议参考 https://github.com/kazupon/vue-i18n 的做法
    crushJs
        11
    crushJs  
    OP
       2018-04-16 17:51:33 +08:00
    @h1367500190 你是说加一个 i18n 的插件是吗?
    airyland
        12
    airyland  
       2018-04-16 19:41:06 +08:00 via iPhone
    全局 filter
    crushJs
        13
    crushJs  
    OP
       2018-04-17 09:38:08 +08:00
    @airyland 嗯我也是这么想的,可是我想不到说服我同事的理由....楼上的启发了我,静态化
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2896 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 13:04 · PVG 21:04 · LAX 05:04 · JFK 08:04
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.