0

I am using vue3.As shown in the below posted code, in the class test.js should be a composable class. i want this class to reflect the change of state in another vue-component. in other words, the value of state changes as eminent in the code, i want to reflect the updated value of state in a vue-component. i want the vue-component to display the different states set in the test.js

to achieve that, i made the state of type ref as shown in the code.

in the vue-component as shonw below, i call and display the contents of state = useState() in ' state: {{state }}' and i expect the states to be displayed are not-satrted,started, processing and successful. But that does not happend.

how can i print updated values of state from test.js in a vue-component please.

vue-component:

<template>
    <span> state: {{state }}</span>
</template>

<script>
    import { useStates } from '../xxx/xxx/Composables/test.js';
    const state = useStates();

test.js

import { ref, onMounted, onUnmounted } from 'vue'

// by convention, composable function names start with "use"
export function useStates() {
  let state = ref('not-satrted')

  setTimeout(() => {
    state.value = 'started'
  }, 1000);

  setTimeout(() => {
    state.value = 'processing'
  }, 2000);

  setTimeout(() => {
    state.value = 'successful'
  }, 3000);
  // expose managed state as return value
  return state 
}
Improve this question
16
  • 1
    you've tagged this both vuejs2 AND vuejs3 - perhaps that's the issue, the two versions are quite different Commented Aug 17, 2023 at 12:51
  • 1
    digitizationStatus needs to be made reactive before you export it if you want the value updated in the .js file to be reflected in the vue component, not after. The .js file should be made into a composable. Or if a store like Pinia makes sense for your app you can just use that Commented Aug 17, 2023 at 12:52
  • The question fails to provide stackoverflow.com/help/mcve , it deals with truncated snippets and doesn't show the big picture. "how i export the digitizationStatus:" - export from which file? ".js" - which file is that? Currently it looks like you have some basic reactivity problem. First of all, preferably not use classes because they have several pitfalls, stackoverflow.com/a/76247596/3731501. In case you modify non-reactive digitizationStatus variable from inside a class, there's no way how you can do that here digitizationStatus = in a sane way, should have been a ref Commented Aug 17, 2023 at 12:54
  • 1
    The class can just expand mitt or any other third-party event emitter or implement pubsub pattern in any other way, so it would be possible to subscribe to events with on() from the outside and emit them with emit() from the inside. There's more than one way to do this, this is just one that is generic and doesn't enforce a class to hack around Vue quirks Commented Aug 17, 2023 at 14:54
  • 1
    I'd naturally recommend to do this, unless this is some framework-agnostic piece of code that isn't tied to the usage in Vue. It's often that the choice of OOP is just a matter of taste and not a real design necessity, so a class can be plainly rewritten as factory function Commented Aug 17, 2023 at 15:20

2 Answers 2

Reset to default
0

You have to understand the principles of react vue reacts work on object cell references you need to use refs from the beginning because there is no power to allow response tracking from variables set digitizationStatus to ref like this:

class ... {
  digitizationStatus = ref()
}
...
if (this.#getOperation() === BtnDigitizePolygonConstants.CONST_STRING_DIGITIZE.description) {
    this.#enableDigitization()
    digitizationStatus.value = BtnDigitizePolygonConstants.CONST_DIGITIZATION_STATE_SUCCESSFUL.description; //<====
}
Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

Is it possible to user ‘ref’ in .is class please?
This will result in a disaster in case class instance is used in a component and becomes reactive, this includes using it in data()
@EstusFlask vue's new react-principles don't care that as long as you run something like get proxy in the effect lifecycle it's valid
people often ask us if they should use ref here, and our answer is always wherever you want to treat it as a variable
@TachibanaShin I mean this issue, stackoverflow.com/questions/73939248/… . Refs are unwrapped inside reactive object in uncontrollable manner, including class instances
|
0

As per your requirement you can use Event Bus to pass the data from JavaScript file to Vue.

In your main.js :

import Vue from 'vue';
export const eventBus = new Vue();

And then in your DigitizePolygonInteractions.js file, You can emit the digitizationStatus using $emit method on eventBus.

import { eventBus } from './main.js';

// Your other code logic will come here
{
  eventBus.$emit('digitizationStatusUpdated', digitizationStatus);
}

And then you can listen this event in your vue-component :

In Vue component script section

import { eventBus } from './main.js'; // Adjust the path accordingly

export default {
  data() {
    return {
      digitizationStatus: ''
    }
  },
  created() {
    eventBus.$on('digitizationStatusUpdated', (status) => {
      this.digitizationStatus = status;
    })
  }
}

The above solution is in Vue 2, But if you are looking for a same workaround in Vue 3, You can achieve that using external library tiny-emitter. Give a read to this documentation.

Improve this answer

3 Comments

Thank you. What do you think of composable?should I try to convert the Js class ‘ DigitizePolygonInteractions.js’ to composable?would it be another possible solution please?
The question is Vue 3, while code is 2
@EstusFlask Thanks for pointing that out. I updated my answer as per the Vue 3 workaround.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.