Description
Version
Vue 2.7.2
Node.js 16
Reproduction link
Steps to reproduce
I'm using the following Pinia store. All that's happening here is the state is being set to a value. According to Pinia's docs, this should work just fine. And indeed it does in the browser.
import serialize from 'serialize-javascript'
export const useSiteStore = defineStore('site', {
state: () => ({
domain: null
}),
actions: {
async setSite(domain) {
console.log(serialize(this.domain)) // { "value": null }
this.domain = domain
console.log(serialize(this.domain)) // "example.com"
}
}
})
What is expected?
The console.log outputs should match in structure with just the value having changed. I'm unsure whether it should be an object returned or strictly just the value, but it should be the same for both. (The browsers return null and then "example.com"). this.domain should be updated reactively.
What is actually happening?
When this.domain = domain is executed, the reactive reference or whatever you'd call it is overwritten and replaced by a plain JS string. The result is that this.domain is no longer reactive. It's worth noting that the above code works perfectly in Chrome/Firefox. It only fails during SSR. As a result Node.js is outputting [Vue warn]: toRefs() expects a reactive object but received a plain one.
I initially filed this issue with the Pinia team, but they don't seem convinced that this is a Pinia issue. vuejs/pinia#1425