Closed djmattyg007 closed 2 years ago
Hi @djmattyg007,
Yes indeed the setup does not let you use this
but only props
, and attrs, slots, emit via context
.
But a computed value should access this.$waveui
correctly in client side and should be reactive.
Here is an example https://codepen.io/antoniandre/pen/JjWazPR?editors=1010:
<p>width: {{ width }}</p>
computed: {
width () {
return this.$waveui.breakpoint.width
}
}
Let me know if that helps :)
Computed values are also prepared in the setup()
function, using the new computed
function:
import { computed } from "vue";
export default {
setup() {
const x = computed(() => 2 * 3);
return { x };
},
}
Based on my testing, I cannot access this
(and by extension, this.$waveui
) inside computed()
functions.
$waveui cannot be accesed using the composition api (or i havent found how). there should be a thing like
import { useWaveUI } from 'wave-ui'; const waveui = useWaveUI();
like the ones inm vuex, or vue-router. Otherwise i dont see how we could access it through the composition api
main.ts
import { createApp, reactive } from 'vue'
import App from './App.vue'
import WaveUI from 'wave-ui'
import 'wave-ui/dist/wave-ui.css'
import '@mdi/font/css/materialdesignicons.min.css'
const app = createApp(App)
const waveui = new WaveUI(app, {})
app.
provide('waveui', reactive(waveui)).
mount('#app')
component:
<script setup lang="ts">
import { inject } from 'vue';
const WaveUi = inject('waveui') as {
breakpoint: {
lg: boolean
md: boolean
name: "lg" | "md" | "sm" | "xl" | "xs",
sm: boolean
width: number
xl: boolean
xs: boolean
}
}
</script>
html:
<p>{{ WaveUi.breakpoint.width }}</p>
Thanks for your valuable input @SebastienLeonce. If you can confirm this would work for your case @djmattyg007, that would be awesome, and I could add a note in the documentation about it 🚀
Hi @djmattyg007,
I've run a few tests in this regard and here is how you access the equivalent of this.$waveui
in the setup hook.
First way is to re-instantiate Wave UI: const waveui = new WaveUI(app, {})
This is not a problem because internally, the Wave UI class is a Singleton.
The other way would be to access the same waveui object from its single definition where you set it up:
const waveui = new WaveUI(app, {})
and export/import this variable. Same effect.
Also note 3 things:
this
and where the DOM does not exist yet. So the waveui.breakpoint
object will not be hydrated at this exact moment. But the same waveui
object reference will be updated once the mounted hook is reached.
That means that from the setup hook you can console.log(waveui.breakpoint)
and it will not be updated, but console.log(waveui) and drill down from console will show you the hydrated object.Here is a demo: https://codepen.io/antoniandre/pen/zYpBgbm?editors=1010
Hope it makes sense! ;)
How are we supposed to access
this.$waveui
when using the composition APIsetup()
function? I know you can't refer tothis
directly insetup()
, but it also doesn't seem to work incomputed
functions either.