fix: [Vue warn]: toRefs() expects a reactive object but received a plain one.

See original GitHub issue

πŸ› The bug What isn’t working? Describe what the bug is.

πŸ› οΈ To reproduce Steps to reproduce the behavior:

run nuxt add https://pinia.esm.dev/ssr/nuxt.html import store like

<!-- SCRIPT -->
<script lang="ts">
  import { defineComponent } from '@nuxtjs/composition-api'; 
  import { useStore } from "~/store/main";

  export default defineComponent({
    name: 'Count',
    props: {},
     setup() {
        const store = useStore();
        return { store };
    }
  });
</script>
<!-- - ⚑ - -->


store:

import { defineStore } from 'pinia';

export const useStore = defineStore('companiesInfo', {
  state: () => ({
    data: {test: 1},
  }),
});

I’d be very grateful for a link to a gist or repo that reproduces the bug.

🌈 Expected behaviour What did you expect to happen? Is there a section in the docs about this?

ℹ️ Additional context pinia issues https://github.com/posva/pinia/issues/648

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:1
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
posvacommented, Oct 1, 2021
0reactions
thisVioletHydracommented, Sep 24, 2021

@danielroe any news ?

Read more comments on GitHub >

github_iconTop Results From Across the Web

toRefs(props) throws warning #357 - vuejs/composition-api
1 and noticed a new warning popping up: [Vue warn]: toRefs() expects a reactive object but received a plain one.
Read more >
Vuetify 3 warning: toRefs() expects a reactive object but ...
I'm using Vuetify 3 beta 5 with options API in my components. When I either click a v-select or hover over a v-tooltip...
Read more >
Reactivity Transform - Vue.js
If a destructured value is not a ref (e.g. a function), it will still work - the value will be wrapped in a...
Read more >
shobotch.eth on Twitter: "toRefs() expects a reactive object but ...
The bug When I use useMeta, I get the following warning in dev mode on server side: toRefs() expects a reactive object but...
Read more >
On-demand Reactivity in Vue 3 - Toptal
Thus the object might have one section for reactive data ( data ), another section for computed properties ( computed ), one more...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found