OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Nuxt 3 sometimes I can omit .value when using useState, sometimes I can't, why?

  • Thread starter Thread starter Joseph
  • Start date Start date
J

Joseph

Guest
Please see this minimum example, if I use useState , normally, I can write something like this:

Code:
<script setup>
const num = useState('num', () => 1);
</script>

<template>
  <div>
    {{ num }}
  </div>

  <div>
    {{ typeof num }}
  </div>

  <div>
    {{ JSON.stringify(num) }}
  </div>
</template>

And the result is what I expected:

Code:
1
number
1

enter image description here

However, when I move the useState into composables, everything changed, like this:

Code:
export const useNum = () => {
  const num = useState('num', () => 1);

  return {
    num,
  };
};

Code:
<script setup>
const numStore = useNum();
</script>

<template>
  <div>
    {{ numStore.num }}
  </div>

  <div>
    {{ typeof numStore.num }}
  </div>

  <pre>
    {{ JSON.stringify(numStore.num, null, 2) }}
  </pre>
</template>

the result is super weird:

Code:
1
object
    {
  "_object": {
    "$s__nuxt_devtools__": {
      "timeSsrStart": 1719387436211
    },
    "$snum": 1
  },
  "_key": "$snum",
  "__v_isRef": true
}

enter image description here

enter image description here

Why is this happening? How can I avoid this?

<p>Please see this minimum example, if I use <code>useState</code> , normally, I can write something like this:</p>
<pre class="lang-js prettyprint-override"><code><script setup>
const num = useState('num', () => 1);
</script>

<template>
<div>
{{ num }}
</div>

<div>
{{ typeof num }}
</div>

<div>
{{ JSON.stringify(num) }}
</div>
</template>
</code></pre>
<p>And the result is what I expected:</p>
<pre><code>1
number
1
</code></pre>
<p><a href="https://i.sstatic.net/IYrci1PW.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/IYrci1PW.png" alt="enter image description here" /></a></p>
<p>However, when I move the <code>useState</code> into composables, everything changed, like this:</p>
<pre class="lang-js prettyprint-override"><code>export const useNum = () => {
const num = useState('num', () => 1);

return {
num,
};
};
</code></pre>
<pre class="lang-js prettyprint-override"><code><script setup>
const numStore = useNum();
</script>

<template>
<div>
{{ numStore.num }}
</div>

<div>
{{ typeof numStore.num }}
</div>

<pre>
{{ JSON.stringify(numStore.num, null, 2) }}
</pre>
</template>

</code></pre>
<p>the result is super weird:</p>
<pre><code>1
object
{
"_object": {
"$s__nuxt_devtools__": {
"timeSsrStart": 1719387436211
},
"$snum": 1
},
"_key": "$snum",
"__v_isRef": true
}

</code></pre>
<p><a href="https://i.sstatic.net/EIVknLZP.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/EIVknLZP.png" alt="enter image description here" /></a></p>
<p><a href="https://i.sstatic.net/mLjnlKkD.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/mLjnlKkD.png" alt="enter image description here" /></a></p>
<p>Why is this happening? How can I avoid this?</p>
 

Latest posts

J
Replies
0
Views
1
jbowerbir
J
Top