v-text-fieldの初期値設定の仕方

前提・実現したいこと

vuetifyを使ってユーザ情報編集を作っています。ユーザ情報である名前とパスワードを編集対象にしたいのですが、初期値を現在の名前とパスワードにしたいです。しかし、エラーが起こりました。storageはsessionStorageを使用して、SSRで開発をしています。

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

エラーメッセージ
$store is not defined

該当のソースコード

vue
1<v-text-field
2    ref="name"
3    v-model="name"
4    :rules="nameRule"
5    label="名前"
6></v-text-field>
7<v-text-field
8    ref="email"
9    v-model="email"
10    :rules="mailRule"
11    label="メールアドレス"
12></v-text-field>
13
14<script>
15  export default {
16    data: () => ({
17      name: null,
18      email: $store.state.name,
19      mailRules: v => (/.+@.+..+/.test(v) && !v) || '不適切なアドレスです',
20    }),
21</script>

試したこと

data: ($store) =>({　とすると、Cannot read property 'name' of undefinedとなりました。
また、methods:{ }では、$store.state.nameは問題なく使えました。

行動規範の内容に同意します

回答1件

ベストアンサー

コンポーネントからstoreにアクセスするときは、this.$store.state.nameとしてください。
また、アロー関数でdataプロパティを定義すると、thisが　Vueインスタンスではなくなってしまうのでそちらも修正する必要があります。
さらに、dataプロパティはオブジェクトを返す関数である必要があります。
data は関数でなければなりません

diff
1<v-text-field
2    ref="name"
3    v-model="name"
4    :rules="nameRule"
5    label="名前"
6></v-text-field>
7<v-text-field
8    ref="email"
9    v-model="email"
10    :rules="mailRule"
11    label="メールアドレス"
12></v-text-field>
13
14<script>
15  export default {
16--  data: () => ({
17--    name: null,
18--    email: $store.state.name,
19--    mailRules: v => (/.+@.+..+/.test(v) && !v) || '不適切なアドレスです',
20++  data() {
21++    return {
22++      name: null,
23++      email: this.$store.state.name,
24++      mailRules: v => (/.+@.+..+/.test(v) && !v) || '不適切なアドレスです',
25   }),
26
27</script>