Vue API

The Oui framework registers some instance objects in Vue for easy invocation by individual pages. The variable name 'vm' (short for ViewModel) is used in the documentation to denote Vue instances.

vm.$oui

state: global state

A reactive object with the following fields

Name	Type	description
locale	String	The current language
theme	String	The current theme
hostname	String	The current hostname of the system

<div>{{ $oui.state.locale }}</div>
<div>{{ $oui.state.theme }}</div>
<div>{{ $oui.state.hostname }}</div>

call: Call the backend API

vm.$oui.call(mod, func, [param])

this.$oui.call('system', 'get_cpu_time').then(({ times }) => {
  ...
})

-- /usr/share/oui/rpc/system.lua

local fs = require 'oui.fs'

local M = {}

function M.get_cpu_time()
    local result = {}

    for line in io.lines('/proc/stat') do
        local cpu = line:match('^(cpu%d?)')
        if cpu then
            local times = {}
            for field in line:gmatch('%S+') do
                if not field:match('cpu') then
                    times[#times + 1] = tonumber(field)
                end
            end
            result[cpu] = times
        end
    end

    return { times = result }
end

return M

ubus: Encapsulation of call

this.$oui.ubus('system', 'validate_firmware_image',
    {
        path: '/tmp/firmware.bin'
    }
).then(({ valid }) => {
})

Equivalent to

this.$oui.call('ubus', 'call', {
    object: 'system',
    method: 'validate_firmware_image',
    { path: '/tmp/firmware.bin' }
}).then(r => {
})

login: log in

this.$oui.login('admin', '123456').then(() => {
})

logout: log out

this.$oui.logout().then(() => {
})

setLocale: switch the language

this.$oui.setLocale('en-US')

setTheme: Switch the theme

this.$oui.setTheme('dark')

setHostname: Set the system's hostname

this.$oui.setHostname('OpenWrt')

TIP

You need to set the hostname by calling this function so that $oui.state.hostname can be updated.

reloadConfig: reload config

Encapsulation of the following UBUS operations

ubus call service event '{"type":"config.change", "data": {"package": "system"}}'

this.$oui.reloadConfig('system')

reconnect: Wait until the system restarts finish

This method is useful when performing a restart operation.

this.$oui.reconnect().then(() => {
    this.$router.push('/login')
})

$timer

You might have written something like this before:

<script>
export default {
  data() {
    return {
      timer: null,
      interval: null
    }
  },
  created() {
    this.timer = setTimeout(() => {
        ...
    }, 5000)

    this.interval = setInterval(() => {
        ...
    }, 5000);
  },
  beforeUnmount() {
    clearTimeout(this.timer)
    clearInterval(this.interval)
  }
}
</script>

After using vm.$timer, it looks like this:

<script>
export default {
  methods: {
    getDhcpLeases() {
        ...
    }
  },
  created() {
    this.$timer.create('dhcp', this.getDhcpLeases, { time: 3000, immediate: true, repeat: true })
  }
}
</script>

vm.$timer.create takes three arguments:

• name: Timer name (cannot be repeated)
• callback: The callback method
• option: options

option includes the following fields:

Name	Type	Description
time	Number	Timeout or interval (default value: 1000)
autostart	Boolean	Whether to automatically start after creation (default is true)
immediate	Boolean	Whether to execute a callback function immediately after creation
repeat	Boolean	Whether to repeat

vm.$timer.start: Start timer(If you set autostart as false, you need to call the function)

vm.$timer.stop: Stop the timer (the user does not need to call this function unless otherwise required)

this.$timer.start('test')
this.$timer.stop('test')

$md5

const md5 = this.$md5('123')