VUE003. 解决data中使用vue-i18n不更新视图问题（computed属性）

案例

在国际化开发中，有一部分需要国际化的文字是由数据驱动的储存在data中，然而VUE的data存在很多无法实时更新视图的问题，比如v-for循环的标签，当数据层次过深，通过源数据数组的索引改变它的值是无法实时更新到视图上的。

这个问题可以用 vue.js 提供的 this.$set( ) 或者 vm.$forceUpdate 方法解决。前者向响应式对象中添加一个 property 并确保这个新 property 同样是响应式的，且触发视图更新。后者则是强制渲染视图。

本文介绍用computed属性解决 vue-i18n 不更新视图的问题。

问题代码

data() {
  return {
    label: i18n.t(key)
    // 此处vm.$t(key)亦可
    }
  }
}

解决方法

data(){
    return {}
}

computed: {
    label() {
        return i18n.t(key)
    }
}

扩展知识 - computed属性

在computed属性中，它之所以处理起来很快，正是因为它返回的属性数据结构简单。

个人理解它不应该包含 DOM操作、修改外部变量、异步操作 ，如果想解决这个问题，还需要另外定义一个函数来储存这个操作，再使用computed属性中定义的函数去调用它：

computed: {
    dataSource() {
        return [
            label: i18nt(key)
            click: () => {
                this.someThing()
            }
        ]
    }
}

methods: {
    someThing() {
        this.$router.push({ name: 'HomePage' })
    }
}

如果在computed属性中直接定义click的事件为 $router.push( ) ，将会出现报错，于是应该用以上的方法解决。

直接改变外部变量同样报错：

- END -