useCookies.get("hash"); 時にTypeError: Qo.get is not a function

Question

前提

vue+Laravelでログイン機能を作成しています・

実現したいこと

Laravelから返ってきた値をcookieに保存し
保存した値を取得するという事をやりたいです。

発生している問題・エラーメッセージ

エラーメッセージ

TypeError: Qo.get is not a function
    at Proxy.cookie (app.e1a77fed.js:70:131250)
    at app.e1a77fed.js:1:70302
    at Xn (app.e1a77fed.js:1:13816)
    at Zt (app.e1a77fed.js:1:13895)
    at Zt (app.e1a77fed.js:1:13995)
    at HTMLButtonElement.n (app.e1a77fed.js:1:70086)
Ky @ app.e1a77fed.js:1

クッキーテストというボタンが押された時に
以下の内容を実行するようにしていますが

cookie() {
            // cookie からハッシュを取得
           
            this.test = useCookies.get("hash");
        }

こちらを実行すると上記のエラーが発生します。

関数が存在しないという事なのですが以下の定義を見る限りget自体はあるという認識です。
知識のある方、どうかご教授頂けると幸いです。

cookie() {
            // cookie からハッシュを取得
           
            this.test = useCookies.get("hash");
        }

該当のソースコード

<template>


    <div>
        {{ test }}
    </div>

    <div
        v-bind:style="{ position: 'fixed', left: '50%', top: '50%', transform: 'translate(-50%, -50%)', width: '500px', height: '400px' }">
        <v-form ref="form" v-model="valid" lazy-validation>
            <v-text-field v-model="username" :counter="10" :rules="usernameRules" label="名前" required></v-text-field>

            <v-text-field v-model="email" :rules="emailRules" label="メールアドレス" required></v-text-field>

            <v-text-field v-model="password" :rules="passwordRules" label="パスワード" required></v-text-field>


            <v-btn v-bind:style="{ left: '85%' }"
                class="mr-4 rounded-full px-4 py-2 text-gray-500 bg-blue-500 hover:bg-gray-300 focus:outline-none focus:shadow-outline"
                @click="validate"> 登録

            </v-btn>




        </v-form>

        <v-btn @click="cookie">
            クッキーテスト
        </v-btn>

    </div>
</template>

<script>
import axios from 'axios';
import { useCookies } from 'vue3-cookies'

export default {



    data: () => ({
        test: "",
        valid: true,
        username: '',
        usernameRules: [
            v => !!v || '名前は必須です',
            v => (v && v.length <= 10) || '名前は10文字以内である必要があります',
        ],
        email: '',
        emailRules: [
            v => !!v || 'メールアドレスは必須です',
            v => /.+@.+..+/.test(v) || '有効なメールアドレスである必要があります',
        ],
        password: '',
        passwordRules: [
            v => !!v || 'パスワードは必須です',
            v => (v && v.length >= 6 && v.length <= 12) || 'パスワードは6文字から12文字である必要があります',
            v => (v && /[A-Z]/.test(v) && /[a-z]/.test(v) && /\d/.test(v)) || 'パスワードは少なくとも1つの大文字、1つの小文字、1つの数字を含む必要があります'
        ],

    }),

    setup() {
       
    },

    methods: {
        async validate() {
            const { valid } = await this.$refs.form.validate()



            if (valid) {
                alert('こちらの内容でよろしいですか？')

                const username = this.username;
                const email = this.email;
                const password = this.password;

               

                

                try {
                    // POSTリクエストを送信
                    const res = await axios.post('/api/register', {
                        username: username,
                        email: email,
                        password: password
                    });

                    console.log(res);

                    // レスポンスを処理
                    const hash = res.data.hash;



                    console.log(hash, email, username)


                    useCookies.set('hash', hash, {
                        expires: new Date().setDate(new Date().getDate() + 7) // 保存期間を 7 日に設定
                    })
                    useCookies.set('email', email, {
                        expires: new Date().setDate(new Date().getDate() + 7) // 保存期間を 7 日に設定
                    })
                    useCookies.set('username', username, {
                        expires: new Date().setDate(new Date().getDate() + 7) // 保存期間を 7 日に設定
                    })





                } catch (error) {
                    // エラー処理
                    // ...
                }


            }

        },
        reset() {
            this.$refs.form.reset()

        },
        resetValidation() {
            this.$refs.form.resetValidation()


        },


        cookie() {
            // cookie からハッシュを取得
           
            this.test = useCookies.get("hash");
        }

    },
    
}
</script>

補足情報（FW/ツールのバージョンなど）

Docker
nginx
Laravel9
vue3
vite3

Comments

[maisumakun]

useCookiesは、どのようなライブラリからimportされたものでしょうか？

[sskcom]

コメントありがとうございます。
補足情報に記載しておらず申し訳ございません。
vue3-cookiesです。

Answer 1

vue3-cookies のライブラリはこちらで合っていますかね👀
https://github.com/KanHarI/vue3-cookies

その場合、useCookies()で cookiesというリアクティブなオブジェクトが返るので、それに対して get メソッドを実行してあげれば良さそうな気がします！
下記のように修正してうまくいくか試していただけますでしょうか？

setup() {
  const { cookies } = useCookies();       
},
...

cookie() {
  this.test = this.cookies.get("hash");
}

ちなみに、 useCookies の実装は下記のようになっているようです📝
https://github.com/KanHarI/vue3-cookies/blob/master/src/index.ts#L235-L243

Comments

[sskcom]

回答ありがとうございます。
今すぐ試す事が出来ないので返答遅くなると思いますが、
試してみます。

[sskcom]

対応が遅く誠に申し訳ございません。
以上の内容の通り実行したところ、問題なく実行できました。
ありがとうございます。

[keita]

お試しいただきありがとうございます！
うまくいったようで良かったです🎉

Answer 2

vue3-cookiesです。

readmeを確認しても、Vue.$cookiesやthis.$cookiesからの呼び出しばかりで、useCookies.と直接呼ぶ形で使うものではなさそうです。

Comments

[sskcom]

返答、大変遅くなり申し訳ございません。
そうですね、そちらの内容で試してみます。
すぐに試す事が出来ないので、また返答は遅くなると思います。
調べて頂きありがとうございます。