Nuxt3 useStateの使い方
Nuxt3 useState useFetch useState Nuxt3's useState is a very convenient tool that allows you to store and retrieve data. It can be used in conjunction with useFetch to do a lot of things. In this article, we will show you how to use useState to enter data, retrieve data, and add data.
by JanitorSep 19, 2023
Nuxt3のuseStateの使い方に関する記事です。非常に便利で、useFetchと併用することで色々と出来そうです。
Nuxt3のuseStateの使い方に関する記事です。非常に便利で、useFetchと併用することで色々と出来そうです。
Jump Links
1. useStateを使ってデータを入れる
1. useStateを使ってデータを取り出す
3. 動作確認
4. おわりに
1. useStateを使ってデータを入れる
1. useStateを使ってデータを入れる
今回の記事では下記のようなフォルダ構成になっています。layoutsフォルダのdefault.vueでcomponent0.vueとindex.vueを呼び出します。component0.vueとindex.vueで表示させるデータを、default.vueでuseStateを使って用意します。component0.vueとindex.vueではuseStateを使ってデータを取り出して使用します。
今回の記事では下記のようなフォルダ構成になっています。layoutsフォルダのdefault.vueでcomponent0.vueとindex.vueを呼び出します。component0.vueとindex.vueで表示させるデータを、default.vueでuseStateを使って用意します。component0.vueとindex.vueではuseStateを使ってデータを取り出して使用します。
default.vueでは下記のようにしてuseStateを使ってデータを入れました。
default.vueでは下記のようにしてuseStateを使ってデータを入れました。
default.vue
<script setup>
import component0 from '@/components/component0.vue';
var useStateKey = "initial";
var data = {
pageDatas: [
{ data: "012" },
{ data: "345" },
],
compoDatas: [
{ data: "678" },
{ data: "9AB" },
]
};
useState( useStateKey, () => data );
</script>
<template>
<div style="margin-top: 10px; margin-left: 10px;">
<component0></component0>
<NuxtPage/>
</div>
</template>
default.vue
<script setup>
import component0 from '@/components/component0.vue';
var useStateKey = "initial";
var data = {
pageDatas: [
{ data: "012" },
{ data: "345" },
],
compoDatas: [
{ data: "678" },
{ data: "9AB" },
]
};
useState( useStateKey, () => data );
</script>
<template>
<div style="margin-top: 10px; margin-left: 10px;">
<component0></component0>
<NuxtPage/>
</div>
</template>
script内では、キーとデータを用意して、useStateにキーとそれに対応するデータを入れています。template内では、component0とindex.vueを呼び出しています。
script内では、キーとデータを用意して、useStateにキーとそれに対応するデータを入れています。template内では、component0とindex.vueを呼び出しています。
1. useStateを使ってデータを取り出す
1. useStateを使ってデータを取り出す
component0.vueでは下記のようにしてデータを取り出しています。
component0.vueでは下記のようにしてデータを取り出しています。
components/component0.vue
<script setup>
var useStateKey = "initial";
var compoDatas = useState( useStateKey ).value.compoDatas;
</script>
<template>
<div class="bgYellow pa-3">
<h3>This area is component0.vue. </h3>
<div>compoDatas is the following.</div>
<span
class="mr-3"
v-for="( compoData, index ) in compoDatas" :key="index">
{{ compoData.data }}
</span>
</div>
</template>
<style>
.bgYellow{
background-color: #EDE169;
}
</style>
components/component0.vue
<script setup>
var useStateKey = "initial";
var compoDatas = useState( useStateKey ).value.compoDatas;
</script>
<template>
<div class="bgYellow pa-3">
<h3>This area is component0.vue. </h3>
<div>compoDatas is the following.</div>
<span
class="mr-3"
v-for="( compoData, index ) in compoDatas" :key="index">
{{ compoData.data }}
</span>
</div>
</template>
<style>
.bgYellow{
background-color: #EDE169;
}
</style>
script内では、キーを用意して、そのキーに対応するデータをuseStateを使って取り出しています。template内では、取り出したデータをv-forを使って取り出しています。一部Vuetifyの記述がありますので、Vuetifyを入れていない方は、pa-3とmr-3を削除してください。
index.vueでも同様に下記のようにしてデータを取り出しています。
script内では、キーを用意して、そのキーに対応するデータをuseStateを使って取り出しています。template内では、取り出したデータをv-forを使って取り出しています。一部Vuetifyの記述がありますので、Vuetifyを入れていない方は、pa-3とmr-3を削除してください。
index.vueでも同様に下記のようにしてデータを取り出しています。
index.vue
<script setup>
var useStateKey = "initial";
var pageDatas = useState( useStateKey ).value.pageDatas;
var add = () => {
pageDatas.push( { data: "CDE" } );
}
</script>
<template>
<div class="bgBlue pa-3">
<h3>This area is index.vue. </h3>
<div>pageDatas is the following.</div>
<div>
<span
class="mr-3"
v-for="( pageData, index ) in pageDatas" :key="index">
{{ pageData.data }}
</span>
</div>
<VBtn @click="add" class=" bgGreen mt-3">add</VBtn>
</div>
</template>
<style>
.bgBlue{
background-color: #9BF4FF;
}
.bgGreen{
background-color: #D1D32A;
}
</style>
index.vue
<script setup>
var useStateKey = "initial";
var pageDatas = useState( useStateKey ).value.pageDatas;
var add = () => {
pageDatas.push( { data: "CDE" } );
}
</script>
<template>
<div class="bgBlue pa-3">
<h3>This area is index.vue. </h3>
<div>pageDatas is the following.</div>
<div>
<span
class="mr-3"
v-for="( pageData, index ) in pageDatas" :key="index">
{{ pageData.data }}
</span>
</div>
<VBtn @click="add" class=" bgGreen mt-3">add</VBtn>
</div>
</template>
<style>
.bgBlue{
background-color: #9BF4FF;
}
.bgGreen{
background-color: #D1D32A;
}
</style>
やっていることは、component0.vueとほぼ同じです。ボタンとボタンを押したときの関数を用意しています。
やっていることは、component0.vueとほぼ同じです。ボタンとボタンを押したときの関数を用意しています。
3. 動作確認
3. 動作確認
yarn devをしてアクセスすると下の画像のように表示されます。
yarn devをしてアクセスすると下の画像のように表示されます。
ボタンを押すと、「012 345 CDE」という表示になります。面白いことに、開発者ツールでボタンを押したときに入る関数で、ブレークポイントを貼ってpush前後で確認すると、グローバル変数の、window -> __NUXT__ -> state（useNuxtApp().payload.stateに相当）を確認すると、下の画像のようにpageDatasに追加してくれています。
ボタンを押すと、「012 345 CDE」という表示になります。面白いことに、開発者ツールでボタンを押したときに入る関数で、ブレークポイントを貼ってpush前後で確認すると、グローバル変数の、window -> __NUXT__ -> state（useNuxtApp().payload.stateに相当）を確認すると、下の画像のようにpageDatasに追加してくれています。
4. おわりに
4. おわりに
とても便利ですね。キーを設定するとC言語で言うところのポインタを返してくれているようなイメージでしょうか。
とても便利ですね。キーを設定するとC言語で言うところのポインタを返してくれているようなイメージでしょうか。
Editors pick
Our other articles
Nuxt3 useStateの使い方
Nuxt3 useState useFetch useState Nuxt3's useState is a very convenient tool that allows you to store and retrieve data. It can be used in conjunction with useFetch to do a lot of things. In this article, we will show you how to use useState to enter data, retrieve data, and add data.
by JanitorSep 19, 2023
Nuxt3のuseStateの使い方に関する記事です。非常に便利で、useFetchと併用することで色々と出来そうです。
Nuxt3のuseStateの使い方に関する記事です。非常に便利で、useFetchと併用することで色々と出来そうです。
Jump Links
1. useStateを使ってデータを入れる
1. useStateを使ってデータを取り出す
3. 動作確認
4. おわりに
1. useStateを使ってデータを入れる
1. useStateを使ってデータを入れる
今回の記事では下記のようなフォルダ構成になっています。layoutsフォルダのdefault.vueでcomponent0.vueとindex.vueを呼び出します。component0.vueとindex.vueで表示させるデータを、default.vueでuseStateを使って用意します。component0.vueとindex.vueではuseStateを使ってデータを取り出して使用します。
今回の記事では下記のようなフォルダ構成になっています。layoutsフォルダのdefault.vueでcomponent0.vueとindex.vueを呼び出します。component0.vueとindex.vueで表示させるデータを、default.vueでuseStateを使って用意します。component0.vueとindex.vueではuseStateを使ってデータを取り出して使用します。
default.vueでは下記のようにしてuseStateを使ってデータを入れました。
default.vueでは下記のようにしてuseStateを使ってデータを入れました。
default.vue
<script setup>
import component0 from '@/components/component0.vue';
var useStateKey = "initial";
var data = {
pageDatas: [
{ data: "012" },
{ data: "345" },
],
compoDatas: [
{ data: "678" },
{ data: "9AB" },
]
};
useState( useStateKey, () => data );
</script>
<template>
<div style="margin-top: 10px; margin-left: 10px;">
<component0></component0>
<NuxtPage/>
</div>
</template>
default.vue
<script setup>
import component0 from '@/components/component0.vue';
var useStateKey = "initial";
var data = {
pageDatas: [
{ data: "012" },
{ data: "345" },
],
compoDatas: [
{ data: "678" },
{ data: "9AB" },
]
};
useState( useStateKey, () => data );
</script>
<template>
<div style="margin-top: 10px; margin-left: 10px;">
<component0></component0>
<NuxtPage/>
</div>
</template>
script内では、キーとデータを用意して、useStateにキーとそれに対応するデータを入れています。template内では、component0とindex.vueを呼び出しています。
script内では、キーとデータを用意して、useStateにキーとそれに対応するデータを入れています。template内では、component0とindex.vueを呼び出しています。
1. useStateを使ってデータを取り出す
1. useStateを使ってデータを取り出す
component0.vueでは下記のようにしてデータを取り出しています。
component0.vueでは下記のようにしてデータを取り出しています。
components/component0.vue
<script setup>
var useStateKey = "initial";
var compoDatas = useState( useStateKey ).value.compoDatas;
</script>
<template>
<div class="bgYellow pa-3">
<h3>This area is component0.vue. </h3>
<div>compoDatas is the following.</div>
<span
class="mr-3"
v-for="( compoData, index ) in compoDatas" :key="index">
{{ compoData.data }}
</span>
</div>
</template>
<style>
.bgYellow{
background-color: #EDE169;
}
</style>
components/component0.vue
<script setup>
var useStateKey = "initial";
var compoDatas = useState( useStateKey ).value.compoDatas;
</script>
<template>
<div class="bgYellow pa-3">
<h3>This area is component0.vue. </h3>
<div>compoDatas is the following.</div>
<span
class="mr-3"
v-for="( compoData, index ) in compoDatas" :key="index">
{{ compoData.data }}
</span>
</div>
</template>
<style>
.bgYellow{
background-color: #EDE169;
}
</style>
script内では、キーを用意して、そのキーに対応するデータをuseStateを使って取り出しています。template内では、取り出したデータをv-forを使って取り出しています。一部Vuetifyの記述がありますので、Vuetifyを入れていない方は、pa-3とmr-3を削除してください。
index.vueでも同様に下記のようにしてデータを取り出しています。
script内では、キーを用意して、そのキーに対応するデータをuseStateを使って取り出しています。template内では、取り出したデータをv-forを使って取り出しています。一部Vuetifyの記述がありますので、Vuetifyを入れていない方は、pa-3とmr-3を削除してください。
index.vueでも同様に下記のようにしてデータを取り出しています。
index.vue
<script setup>
var useStateKey = "initial";
var pageDatas = useState( useStateKey ).value.pageDatas;
var add = () => {
pageDatas.push( { data: "CDE" } );
}
</script>
<template>
<div class="bgBlue pa-3">
<h3>This area is index.vue. </h3>
<div>pageDatas is the following.</div>
<div>
<span
class="mr-3"
v-for="( pageData, index ) in pageDatas" :key="index">
{{ pageData.data }}
</span>
</div>
<VBtn @click="add" class=" bgGreen mt-3">add</VBtn>
</div>
</template>
<style>
.bgBlue{
background-color: #9BF4FF;
}
.bgGreen{
background-color: #D1D32A;
}
</style>
index.vue
<script setup>
var useStateKey = "initial";
var pageDatas = useState( useStateKey ).value.pageDatas;
var add = () => {
pageDatas.push( { data: "CDE" } );
}
</script>
<template>
<div class="bgBlue pa-3">
<h3>This area is index.vue. </h3>
<div>pageDatas is the following.</div>
<div>
<span
class="mr-3"
v-for="( pageData, index ) in pageDatas" :key="index">
{{ pageData.data }}
</span>
</div>
<VBtn @click="add" class=" bgGreen mt-3">add</VBtn>
</div>
</template>
<style>
.bgBlue{
background-color: #9BF4FF;
}
.bgGreen{
background-color: #D1D32A;
}
</style>
やっていることは、component0.vueとほぼ同じです。ボタンとボタンを押したときの関数を用意しています。
やっていることは、component0.vueとほぼ同じです。ボタンとボタンを押したときの関数を用意しています。
3. 動作確認
3. 動作確認
yarn devをしてアクセスすると下の画像のように表示されます。
yarn devをしてアクセスすると下の画像のように表示されます。
ボタンを押すと、「012 345 CDE」という表示になります。面白いことに、開発者ツールでボタンを押したときに入る関数で、ブレークポイントを貼ってpush前後で確認すると、グローバル変数の、window -> __NUXT__ -> state（useNuxtApp().payload.stateに相当）を確認すると、下の画像のようにpageDatasに追加してくれています。
ボタンを押すと、「012 345 CDE」という表示になります。面白いことに、開発者ツールでボタンを押したときに入る関数で、ブレークポイントを貼ってpush前後で確認すると、グローバル変数の、window -> __NUXT__ -> state（useNuxtApp().payload.stateに相当）を確認すると、下の画像のようにpageDatasに追加してくれています。
4. おわりに
4. おわりに
とても便利ですね。キーを設定するとC言語で言うところのポインタを返してくれているようなイメージでしょうか。
とても便利ですね。キーを設定するとC言語で言うところのポインタを返してくれているようなイメージでしょうか。
Editors pick
Our other articles