Multi-language Capability

{
    "message": {
        "appName":"Quick App Sample",
        "pageA": {
            "pageTitle": "Quick App feature display",
            "text": "pure-text-content",
            "format": {
                "object": "type-{name}",
                "array": "type-{0}"
            },
            "array": [
                "item-type-string",
                {
                    "key": "item-type-object-attribute"
                },
                ["item-type-array"]
            ],
            "plurals": {
                "double": "car | cars",
                "three": "no apples | one apple | {count} apples",
                "format": {
                    "object": "type-{name}",
                    "array": "type-{0}"
                }
            }
        }
    }
}

<template>
    <div>
        <text>{{ $t('message.pageA.text') }}</text>
        <text>{{ $t('message.pageA.format.object', { name: 'arg-object' }) }}</text>
        <text>{{ $t('message.pageA.format.array', ['arg-array']) }}</text>
    </div>
</template>
<script>
    export default {
        onInit () {
            // Simple formatting:
            this.$t('message.pageA.text')
            this.$t('message.pageA.format.object', { name: 'arg-object' })
            this.$t('message.pageA.format.array', ['arg-array'])
        }
    }
</script>

// Sample 1: Formatting without additional parameters
// Output: "pure-text-content"
this.$t('message.pageA.text')
// Sample 2: The additional parameter is an object, which is used to replace the referenced content.
// Output: "type-arg-object"
this.$t('message.pageA.format.object', { name: 'arg-object' })
// Sample 3: The additional parameter is an array, which is used to replace the referenced content.
// Output: "type-arg-array"
this.$t('message.pageA.format.array', ['arg-array'])

// Sample 1: When the value of message contains two options, the passed value is not the singular form.
// Output: "cars"
this.$tc('message.pageA.plurals.double', 0)
// Sample 2: When the value of message contains two options, the passed value is in the singular form.
// Output: "car"
this.$tc('message.pageA.plurals.double', 1)
// Sample 3: When the value of message contains two options, the passed value is not in the singular form.
// Output: "cars"
this.$tc('message.pageA.plurals.double', 2)
// Sample 4: When the value of message contains three or more options, the passed value is not in the singular form.
// Output: "no apples"
this.$tc('message.pageA.plurals.three', 0)
// Sample 5: When the value of message contains three or more options, the passed value is in the singular form.
// Output: "one apple"
this.$tc('message.pageA.plurals.three', 1)
// Sample 6: When the value of message contains three or more options, the passed value is not in the singular form.
// Output: "10 apples"
this.$tc('message.pageA.plurals.three', 10)

import configuration from '@system.configuration'
// Obtain the locale. You can set the locale to the data attribute in the VM and determine the locale in the template to further determine the layout.
const localeObject = configuration.getLocale()
// Convert the locale to the character string format, for example, zh or zh-CN.
const locale = [localeObject.language, localeObject.countryOrRegion]
    .filter(n => !!n)
    .join('-')
console.info(`Obtain the current locale: ${locale}`)
import configuration from '@system.configuration'
// Triggered by the VM lifecycle function onConfigurationChanged after locale is set successfully.
configuration.setLocale({
  language: 'zh',
  countryOrRegion: 'CN'
})

onConfigurationChanged(data) {
    // Output {"type":"locale"}
    console.info(JSON.stringify(data))
}