Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Every mutation is announced twice when the Vue.js devtools are active #429

Closed
martinhiller opened this issue Apr 9, 2021 · 4 comments
Closed

Every mutation is announced twice when the Vue.js devtools are active #429

martinhiller opened this issue Apr 9, 2021 · 4 comments
Labels
bug Something isn't working v2 issues related to v2 for Vue 3

Comments

@martinhiller
Copy link

Reproduction

Serve the following HTML, e.g., with npx serve.
(I was unable to get the Vue.js devtools to work within JSFiddle or Codepen, unfortunately.)

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>Page Title</title>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/pinia@next"></script>
  </head>
  <body>
    <div id="app">
      <span style="margin-right: 10px;">{{counter}}</span>
      <button type="button" v-on:click="increment">Increment</button>
    </div>
    <script>
      const useStore = Pinia.defineStore({
        id: 'main',
        state: () => ({
          counter: 0
        })
      })
      const app = Vue.createApp({
        setup() {
          const store = useStore();
          store.$subscribe((mutation, state) => {
            console.log("Counter changed: " + state.counter);
          });
          return {
            counter: Vue.computed(() => store.counter),
            increment() {
              store.counter++;
            }
          };
        }
      });
      app.use(Pinia.createPinia());
      app.mount('#app');
    </script>
  </body>
</html>

Steps to reproduce the behavior

  1. Click on the Increment button.
  2. Observe that every click only prints a single message in the log.
  3. Activate the Vue.js devtools (Chrome version). Pinia will print in the log: "main" store installed
  4. Click on the Increment button again.

Expected behavior

Only one log message is printed for each button click, like before.
In other words, the store.$subscribe callback is only invoked once for each store mutation.

Actual behavior

From now on, with the devtools active, the store.$subscribe callback is invoked twice for each mutation, causing two log entries per click. Even more, the timeline in the Vue.js devtools also reports two mutation events for each click.

Additional information

Vue: 3.0.11
Pinia: 2.0.0-alpha.11
Vue.js devtools (Chrome): 6.0.0 beta 7

Not sure if this is just an accepted odd behavior with the devtools integration at this early stage, but at least I was fairly confused and could not make the connection to the active devtools until very late.
@posva posva added bug Something isn't working v2 issues related to v2 for Vue 3 labels Apr 9, 2021
@posva
Copy link
Member

posva commented Apr 9, 2021

This shouldn't happen nor affect $subscrbe(). It doesn't happen with $patch()

@posva posva added the help wanted Any external help on this topic is welcomed label Apr 9, 2021
@posva
Copy link
Member

posva commented Apr 9, 2021

As a workaround, use a regular watcher on the store.$state or the specific property you want to watch

@posva posva removed the help wanted Any external help on this topic is welcomed label Apr 9, 2021
@posva
Copy link
Member

posva commented Apr 9, 2021

Found the culprit with how the watch is called. I will probably redesign $subscribe a bit as right now it's not worth using it more than a regular watch with deep: true and flush: 'sync'

@posva posva closed this as completed in 71404cb Apr 9, 2021
posva added a commit that referenced this issue Apr 9, 2021
@posva
fix(store): avoid multiple subscriptions call
3e6ce71 
Fix #429, Fix #430
@martinhiller
Copy link
Author

@posva Thank you for the quick investigation and fix! That's awesome!

@posva posva mentioned this issue Apr 10, 2021
Merged
12 tasks
posva added a commit that referenced this issue Apr 10, 2021
@posva
fix(store): avoid multiple subscriptions call
60df4d5 
Fix #429, Fix #430
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working v2 issues related to v2 for Vue 3
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@posva @martinhiller