Update state in a event listener

[ChahinDB7]

Reproduction

https://codesandbox.io/s/hardcore-brattain-l2z1tl?file=/src/main.js

Steps to reproduce the bug

I moved from Vuex (where this scenario worked) to Pinia. The issue is that it is not updating the state in the event listener. I build a simple project on CodeSandBox which simulate the issue I have on my own project.

Go to the link provided on top. Recommend to be in a chrome browser (with voice recognition support) and open the web in a new tab.
You would need to click on the "Start" button. If you say Hello World you will see a message in the console.log. While logging this it should update the state.

Expected behavior

Update the state in this case this.voiceKeyWord = keyWord in VoiceRecognitionStore.js.

Actual behavior

It won't update the state.

Additional information

Using Vue 2 and latest Pinia version

[posva]

I found a few issues in your code:

• If you use this inside a callback, you need to use the arrow function to preserve the context:

  rec.onresult = (e) => {
    //...
    this.voiceKeyWord = keyWord;
  };

• Don't mix Composition and Options API in one single file. Your App.vue can be simplified to

  export default {
    setup() {
      const voiceStore = VoiceRecognitionStore();
  
      return { voiceStore };
    },
  };

I would also recommend you to update your vue dependencies (e.g vue 2.7), there seem to be a few bugs related to the outdated version

[ChahinDB7]

I changed the things you mentioned above in the same CodeSandBox project but the state is still not updating on my end.

[ChahinDB7]

Would it solve the issue if I would use Vue3? @posva

[posva]

I can't tell for sure. That shouldn't be the problem. If it's a new project, you should definitely use Vue 3. Maybe make sure the code you wrote works in vanilla JS

Note in codesandbox you don't have the up-to-date versions. I would recommend you starting a local project to test things out more confidently

[ChahinDB7]

It solve the problem on my own project. Thanks for the help.