useURLSearchParams is not safe when used concurrently

Describe the bug

Two different parameters kick each other out.

const useA = defineStore({
  state: {
    params: useURLSearchParams()
  },
  actions: {
    test() {
      this.params.a = 'test';
    }
  }
})

const useB = defineStore({
  state: {
    params: useURLSearchParams()
  },
  actions: {
    test() {
      this.params.b = 'test';
    }
  }
})

useA().test();
useB().test();

Param b kicks out param a from URL!

Expected:

?a=test&b=test

i.e. the same behavior as URLSearchParams.set.

Got:

?b=test

Reproduction

https://github.com/mskr/useUrlSearchParamsTest

System Info

"@vueuse/core": "^8.5.0",
"pinia": "^2.0.12",
"vue": "^3.2.31"

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a VueUse issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[huynl-96]

It looks like you want to control the params throughout all the pages for the entire app. For that case, you should only use 1 store to manage the params for the whole app

Dividing params into 2 stores means you want to treat your params as 2 different states, i.e. each page will have its own search params. Hence, it does not make sense to merge the params from page A to the one from page B

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.