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

vue

1<template> 2 3 4 <div> 5 {{ test }} 6 </div> 7 8 <div 9 v-bind:style="{ position: 'fixed', left: '50%', top: '50%', transform: 'translate(-50%, -50%)', width: '500px', height: '400px' }"> 10 <v-form ref="form" v-model="valid" lazy-validation> 11 <v-text-field v-model="username" :counter="10" :rules="usernameRules" label="名前" required></v-text-field> 12 13 <v-text-field v-model="email" :rules="emailRules" label="メールアドレス" required></v-text-field> 14 15 <v-text-field v-model="password" :rules="passwordRules" label="パスワード" required></v-text-field> 16 17 18 <v-btn v-bind:style="{ left: '85%' }" 19 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" 20 @click="validate"> 登録 21 22 </v-btn> 23 24 25 26 27 </v-form> 28 29 <v-btn @click="cookie"> 30 クッキーテスト 31 </v-btn> 32 33 </div> 34</template> 35 36<script> 37import axios from 'axios'; 38import { useCookies } from 'vue3-cookies' 39 40export default { 41 42 43 44 data: () => ({ 45 test: "", 46 valid: true, 47 username: '', 48 usernameRules: [ 49 v => !!v || '名前は必須です', 50 v => (v && v.length <= 10) || '名前は10文字以内である必要があります', 51 ], 52 email: '', 53 emailRules: [ 54 v => !!v || 'メールアドレスは必須です', 55 v => /.+@.+..+/.test(v) || '有効なメールアドレスである必要があります', 56 ], 57 password: '', 58 passwordRules: [ 59 v => !!v || 'パスワードは必須です', 60 v => (v && v.length >= 6 && v.length <= 12) || 'パスワードは6文字から12文字である必要があります', 61 v => (v && /[A-Z]/.test(v) && /[a-z]/.test(v) && /\d/.test(v)) || 'パスワードは少なくとも1つの大文字、1つの小文字、1つの数字を含む必要があります' 62 ], 63 64 }), 65 66 setup() { 67 68 }, 69 70 methods: { 71 async validate() { 72 const { valid } = await this.$refs.form.validate() 73 74 75 76 if (valid) { 77 alert('こちらの内容でよろしいですか？') 78 79 const username = this.username; 80 const email = this.email; 81 const password = this.password; 82 83 84 85 86 87 try { 88 // POSTリクエストを送信 89 const res = await axios.post('/api/register', { 90 username: username, 91 email: email, 92 password: password 93 }); 94 95 console.log(res); 96 97 // レスポンスを処理 98 const hash = res.data.hash; 99 100 101 102 console.log(hash, email, username) 103 104 105 useCookies.set('hash', hash, { 106 expires: new Date().setDate(new Date().getDate() + 7) // 保存期間を 7 日に設定 107 }) 108 useCookies.set('email', email, { 109 expires: new Date().setDate(new Date().getDate() + 7) // 保存期間を 7 日に設定 110 }) 111 useCookies.set('username', username, { 112 expires: new Date().setDate(new Date().getDate() + 7) // 保存期間を 7 日に設定 113 }) 114 115 116 117 118 119 } catch (error) { 120 // エラー処理 121 // ... 122 } 123 124 125 } 126 127 }, 128 reset() { 129 this.$refs.form.reset() 130 131 }, 132 resetValidation() { 133 this.$refs.form.resetValidation() 134 135 136 }, 137 138 139 cookie() { 140 // cookie からハッシュを取得 141 142 this.test = useCookies.get("hash"); 143 } 144 145 }, 146 147} 148</script>