How can I emit localstorage change with Vue?

Question

I have some problems with my Vue app. I'm trying to update user information that are stored in localStorage, and I'm updating it with websockets in App.vue in mounted function, like so:

window.Echo.channel("user." + this.userData.id).listen(".user-updated", (user) => {
              localStorage.setItem('userData', JSON.stringify(user.user))
        });

And so far, so good actually, localstorage is updating realtime, but the problem is, the user must refresh the page or change route so other information that is shown in another components could be updated.

Is there any way I can update all my components at once from App.vue?

You likely should update Vuex instead and use it as single source of truth. And Vuex should sync itself with LS. — Estus Flask
– Estus Flask, Commented May 18, 2021 at 14:16

isherwood · Accepted Answer · 2021-05-18 14:26:59Z

1

You can emit events using event bus, or else use Vuex. For example:

window.Echo.channel("user." + this.userData.id).listen(".user-updated", (user) => {
              localStorage.setItem('userData', JSON.stringify(user.user));

              //emit event
              EventBus.$emit('EVENT_USER_DATA_CHANGE', payLoad);
        });

Then, on other components:

 mounted () {
    EventBus.$on(‘ EVENT_USER_DATA_CHANGE’, function (payLoad) {
      ...
    });
  }

edited May 18, 2021 at 14:26

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered May 18, 2021 at 14:18

prisar

3,2052 gold badges28 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Roel Schlijper · Accepted Answer · 2021-05-18 14:21:25Z

0

You can use :key binding on your body or main container. (e.g. <main :key="pageTrigger">) In your listen function update pageTrigger with new Date().getTime() so it will re-render the components inside the container.

Are you using vuex too? put the pageTrigger in some store so it will be accessible from everywhere in your app.

answered May 18, 2021 at 14:21

Roel Schlijper

563 bronze badges

Collectives™ on Stack Overflow

How can I emit localstorage change with Vue?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related