Is there a way to keep reactive object up to date with the original one?

[dlohvinov]

Hi!

Is there in Vue 3 a way to keep my reactive object up to date with the original one, like it worked in Vue 2?

For instance:

const chat = { messages: [] }; // somewhere in lib so I cannot make it reactive
this.chat = chat;
chat.messages.push(1); // this.chat.messages = []; chat.messages = [1];

I'm struggling with issue where I have an npm package with objects which are mutating themselves (for instance, chat object, where it's state is changing, new messages appear and push to chat.messages array and so on). I push this chat object to the app state, but when original chat changes, there's no UI changes because reactive chat doesn't change :(

However, Vue 2 works well with this case: reactive chat is up to date with the original one from npm package.

Is there a way to fix this issue?
Or, if not, I have no idea how my app should work then: shall I subscribe to all package events and duplicate object mutations logic by myself, or there may be other ways to handle this issue?

[chenxch]

If you are a new project, it is recommended to use setup. demo

[dlohvinov]

@chenxch That's an already existing relatively large project. I'm trying to move from Vue 2 to Vue 3 now.

Actually, I have chats websocket and logic, provided by our npm lib. I can subscribe to these chats events like following:

const handler = (context) => (action, chat) => {
  switch (action) {
    case ChatActions.UserInvite:
    case ChatActions.Message:
    case ChatActions.Decline:
    case ChatActions.Leave:
    case ChatActions.Close:
    case ChatActions.Destroy:
    default:
  }
};

client.subscribeChat(handler(context));

At Invite event I'm pushing newly created chat to Vuex state.

const state = {
  chatList: [],
};

Then, lib modifies this chat object, for instance modifying state of adding new massages.

But in Vue 3 state chat object doesn't modify at all. All I can do is reload a page so that state will update this chat object entirely. In Vue 2, this case works perfectly.

computed: {
  messages() { return this.chat.messages; } // returns [] where actual chat has [message, message, message]
}

If I understand correctly, that's because reactive Proxy looses reference to original object (docs link). However may be there's some workarounds for this issue?

[dlohvinov]

I hope there is should be an easy workaround solution, or I made some logical mistake, because, I suppose, this case is quite typical, and I don't know how to refactor it so it would work with new reactivity system which loses references to original objects :(

Theoretically, I can move all lib logic to my side, but this isn't scaling at all so that I assume that as poor solution. But I cannot think up an another solution for this case :(

[LinusBorg]

I think either your example is wrong, or you are mistunderstanding your problem. the code you shared will work insofar as the reactive this.chat.messages will always return the same content as the nonreactive chat.messages. There's no loss of data.

The problem you might rather experience is that modifying the non-reactive chat.message will not trigger a UI update in your Vue app.

And that's expected. Vue 3 Reactivity tracks changes through the reactive proxy. any changes done directly to the non-reactive original cannot be tracked. So it might appear to you as if the change was lost, simply because the UI could not react to the change.

[LinusBorg]

I haven't fully understood "the case" as you only provided a context-free example. So I can't say either way. All I did was give a possible answer based on the limited information about your problem

[chenxch]

chat.messages.push(1); // this.chat.messages = []; chat.messages = [1];

Or in which way to get this conclusion, actually print or observe on the view

[dlohvinov]

You're right, I will try to add some context to my case and provide you with real examples :)

[LinusBorg]

That does not tell me anything new that would help me answer your question.

Again: my "suspicion" (!!!!) is that chat.messages and this.chat.messages both do contain [1], but you think one does not because the UI does not update. I could be wrong. I know little about your actual code.

I can't tell if my suspicion is correct as you haven't given me any feedback on that.

And I can't say how to fix the issue with your library as I don't know enough abou how you interact with it. The info you gave so far above is not very detailed:

At Invite event I'm pushing newly created chat to Vuex state.
Then, lib modifies this chat object, for instance modifying state of adding new massages.

[dlohvinov]

Yep, my bad, you're right. this.chat.messages also contains [1]. The problem is with redrawing UI.

Let me have a minute to describe my case much in detail

[dlohvinov]

So, I have an application written on Vue 2 where I work with chats. Chats are running through websocket and there is a layer between my application and this websocket: our client lib which wraps websocket handling and contains some logic shared between applications.

Here, in my store, I subscribe to Client library chat events, like following:

const state = {
   chatList: [],
}

const actions = {
 SUBSCRIBE_CHATS: async (context) => {
   const handler = (context) => (action, chat) => {
     switch (action) {
        case ChatActions.UserInvite:
          // add chat to chatList
        case ChatActions.Message:
         // send sound notification
        case ChatActions.Destroy:
         // remove chat from chatList and clear my workspace
       default:
  }
};


    await client.subscribeChat(handler(context), null);
    const chatList = client.allConversations();
    if (chatList.length) context.dispatch('SET_CHAT_LIST', chatList);
  },
}

I try to reference Client library as much as possible instead of writing my own logic in order to prevent logic duplication and to have only one source of truth.

For instance, let's take messages. I do not push any messages to in my code because Client library does it for me in its chat object. In current, Vue 2, version UI just draws new message when it appears:

<template>
    <div v-for="(message, key) of messages" :key="message.id">
        <message
          :message="message"
        ></message>
      </div>
</template>

<script>
  computed: {
    ...mapGetters('features/chat', {
      chat: 'CHAT_ON_WORKSPACE', // first from chatList
    }),
    messages() {
      return this.chat.messages;
    },
 },
</script>

So I want to messages to be drawn automatically when they appear on external chat object which is added to chatList.
The same goes for states, statuses, and any other properties of chat. And I don't know how to do it using Vue 3 :(

[dlohvinov]

Also, please, provide me with feedback: am I provided you with enough context to understand my issue, or should I clarify or describe something in more detail?

[LinusBorg]

Also, please, provide me with feedback: am I provided you with enough context to understand my issue, or should I clarify or describe something in more detail?

Yes, that as helpful, thanks.

It seems to be as I thought, for the most part. You will have a harder time here, yes.

In Vue 3, Vue does not make the original object reactive by changing its properties, it rather create a reactive proxy that is used instead of the original object. That also means that only changed through the proxy object can be tracked.

So what are your options?

1. Likely unrealistic: If you can change the library, add a reactive() call where the original state is created. Would make Vue a dependency of the lib. Likely not what you want.
2. Hacky: check if your library allows for you to replace that state with the reactive proxy, so that the library now uses the reactive proxy instead of the original state object
3. Less hacky, still rather unrealistic: change the lib to allow a callback, let's call it augmentState(). This callback would receive the original client state at creation and can return a modified (reactified) version.
4. Most work, most reliable: Whenever an event hits your subrcription handler, update the state in vuex, i.e. with context.dispatch('SET_CHAT_LIST', [...chatList]); - a new array means Vue will realize there has been an update and re-render.

[dlohvinov]

That's it, thank you very much!