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

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

  •  
  •   crushJs · 156 天前 · 1764 次点击
    这是一个创建于 156 天前的主题,其中的信息可能已经有所发展或是发生改变。
    公司在我来之前,定了一个规范
    然后规范是把一些固定(常用)的字段映射,比如 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
        1
    LeungJZ   156 天前
    我的做法是:

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

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

    引入:
    import {getState} from 'xxx'

    getState(YourStateFromRemote)
        2
    crushJs   156 天前
    @LeungJZ 我就是想知道,为啥要在 root 层多写一层字段映射呢? state 不应该是纯净的数据流吗?数据处理怎么放到 root 层了?
        3
    LeungJZ   156 天前
    可以在 store 中分一个模块出来,专门管理这些静态资源,放不放 root 看个人习惯,反正一般都是通过 store.getters.xxx 去取的。
        4
    safaring   156 天前
    赞同你的想法
        5
    crushJs   156 天前
    @safaring 但是就是很尴尬,互相找不到说服对方的方法.....因为也没有具体说哪种好
        6
    goreliu   156 天前
    如果你不清楚自己的方法好在哪里,为什么要说服对方使用自己的方法呢?你可以换位思考一下。
        7
    crushJs   156 天前
    @goreliu 因为我们双方都没有说服对方啊....他们能说服我我当然用啊...
        8
    goreliu   156 天前   ♥ 1
    @crushJs 规范就是没有异议优先采用的,如果你认为规范不合理,那你需要指出为什么不合理,然后怎样才合理,来说服规范的制定者或者采用者。可以设想一下你是规范的制定者,然后重新想一下这个问题。
        9
    h1367500190   156 天前
    如果只是实现类似于 i18n,或者只是普通的键值对,没必要放到 store 里吧,为什么不静态化呢?非要这样做的话,我觉得还不如做成插件以添加全局属性的方式实现
        10
    tao1991123   156 天前
    现在只有一种语言: 中文
    ```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 的做法
        11
    crushJs   156 天前
    @h1367500190 你是说加一个 i18n 的插件是吗?
        12
    airyland   156 天前 via iPhone
    全局 filter
        13
    crushJs   155 天前
    @airyland 嗯我也是这么想的,可是我想不到说服我同事的理由....楼上的启发了我,静态化
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1238 人在线   最高记录 3762   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.1 · 21ms · UTC 17:06 · PVG 01:06 · LAX 10:06 · JFK 13:06
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1