fetching a state - vue js ?

User3D

I want to fetch value of boards[0].uniqueId in DWC (https://github.com/Duet3D/DuetWebControl) . App.vue has 'boards' available in mapState and I am able to use it within HTML tags to print uniqueId .But when I displayed uniqueId in one of the vue's methods , it prints undefined . Is there any other method to access this states in js? I am new to vue js . Can somebody please help me with the same? @chrishamm @dc42 any suggestions?

chrishamm

@user3d Please share your code. It should suffice to map boards to your Vue instance and to print it from a Vue expression ({{ boards[0].uniqueId }}).

User3D

@chrishamm I am able to print it from a vue expression on App.vue . The thing is that I want to use it in js method once connection is established with board.

ConnectDialog.vue : ( please review function:submit - it executes alert('CONNECTED') and alert(this.boards[0].uniqueId) is ignored )

<template>
	<v-dialog v-model="shown" persistent no-click-animation width="360">
		<v-card>
			<v-form ref="form" @submit.prevent="submit">
				<v-card-title class="headline">
					{{ $t('dialog.connect.title') }}
				</v-card-title>

				<v-card-text>
					{{ $t('dialog.connect.prompt') }}

					<v-text-field v-show="!mustConnect" v-model="hostname" :autofocus="!mustConnect" :placeholder="$t('dialog.connect.hostPlaceholder')" :rules="[v => !!v || $t('dialog.connect.hostRequired')]" required></v-text-field>
					<v-text-field ref="password" type="password" :placeholder="$t(passwordRequired ? 'dialog.connect.passwordPlaceholder' : 'dialog.connect.passwordPlaceholderOptional')" v-model="password" :autofocus="mustConnect" :rules="[v => !!v || !passwordRequired || $t('dialog.connect.passwordRequired')]" :required="passwordRequired"></v-text-field>
				</v-card-text>

				<v-card-actions>
					<v-spacer></v-spacer>
					<v-btn v-show="!mustConnect" color="blue darken-1" text @click="hideConnectDialog">{{ $t('generic.cancel') }}</v-btn>
					<v-btn color="blue darken-1" text type="submit">{{ $t('dialog.connect.connect') }}</v-btn>
				</v-card-actions>
			</v-form>
		</v-card>
	</v-dialog>
</template>

<script>
'use strict'

import { mapState, mapActions, mapMutations } from 'vuex'

export default {
	computed: {
		...mapState(['isLocal', 'boards', 'connectDialogShown', 'passwordRequired']),
		...mapState('settings', ['lastHostname']),
		mustConnect() { return !this.isLocal && !this.isConnected; }
	},
	data() {
		return {
			shown: false,
			hostname: location.host,
			password: ''
		}
	},
	methods: {
		...mapActions(['connect']),
		...mapMutations(['showConnectDialog', 'hideConnectDialog']),
		async submit() {
			if (this.shown && this.$refs.form.validate()) {
				this.hideConnectDialog();
				try {
					await this.connect({ hostname: this.hostname, password: this.password });
					this.password = '';
				} catch (e) {
					console.warn(e);
					this.showConnectDialog();
				} finally {	
					alert('CONNECTED');
					alert(JSON.strigify(this.boards[0].uniqueId));  
				}
			}
		}
	},
	mounted() {
		if (this.isLocal) {
			this.hostname = this.lastHostname;
		}
		this.shown = this.connectDialogShown;
	},
	watch: {
		connectDialogShown(to) { this.shown = to; },
		lastHostname(to) {
			if (this.isLocal) {
				// Update the hostname
				this.hostname = to;
			}
		}
	}
}
</script>

chrishamm

@user3d Thanks. Some notes:

There is a typo in the second alert call
Unless you are running your Duet in SBC mode, the OM isn't fully populated at the time a connection has been established. For that reason you see the "Connecting" dialog right after the "Connect" dialog disappears and "boards" remains empty
It would be cleverer to map the first unique board ID directly and to watch for changes instead:

...mapState('machine/model', { uniqueId: state => (state.boards.length > 0) ? state.boards[0].uniqueId : null })

...

watch: {
  ...
  uniqueId(to) {
    alert("Unique id has been changed to " + to);
   }
}

User3D

@chrishamm Thanks for the help!