Nuxt.js asyncDataの値をセットして、dispatchさせたい

Question

前提・実現したいこと

Nuxt.jsを使用してます。

【node.js】 8.11.4
【npm】 6.4.1
【Nuxt.js】 2.2.0
【UI】　Vuetify

##実現したいこと
実現したいことを順番にまとめました。
①<v-text-field>にユーザー名を打ち込み、<v-btn>を押す。
②打ち込まれた値（formData.idにあたります）をdispatch("register")に持たせて、vuex（store/index.js）のロジックに進む。
③vuexの処理としてactions→mutations→stateと進み、[user]がセットされる。
④gettersで[user]を取得して、『ログインしてます。』のところにレンダリングする。

③④あたりは出来ていると思われます。

ソースです。（cssなどは割愛しております）

<template>
  <section class="container">
      <div slot="header" class="clearfix">
        <h2 v-if="isLoggedIn">ログインしてます。<span v-if="user">【{{ user }}】さん</span></h2>
        <h2 v-else="isLoggedIn">ログイン無。</h2>
      </div>
      <form>
        <div class="form-content">
          
        <!-- vuetifyを使用してます。 -->
        <v-text-field
          label="ユーザーID"
          v-model="formData.id"
        ></v-text-field>
        </div>

        <v-btn @click="register()">新規ID作成</v-btn>
      </form>
  </section>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  asyncData() {
    return {
      isCreateMode: false,
      formData: {
        id: null
      }
    };
  },
  methods: {
    async register() {
      await this.$store.dispatch("register", { this.formData });
    }
  },
  computed: {
    ...mapGetters(["user", "isLoggedIn"])
  },
};
</script>

#####store/index.js

import Vuex from 'vuex'

export const state = () => ({
    isLoggedIn: false,
    user: null
})

export const getters = {
    isLoggedIn: state => state.isLoggedIn,
    user: state => state.user

}

export const mutations = {
    setUser(state, user) {
        state.isLoggedIn = true
        state.user = user
    },
}

export const actions = {
    async register({ commit }, { formData }) {
        const user = formData.id
        commit('setUser', user)
    }
}

##問題になっているのは
ユーザー名を打ち込んだときに、asyncDataのformData.idに双方向性バインディングで値がセットされます。
そのセットされた値をdispatchの引数に持たせたいのです。
await this.$store.dispatch("register", { this.formData });
ですが、下記の通りのエラーが出てしまいました。

###考察
await this.$store
{ this.formData });
上記２つのthisがありますが、これらが実際に何を指している「this」なのかわかっていないです。。
this.formDataがasyncDataの値をセットしてくれていないのだなとはエラーから察しました。

これらのthisが何を指しているのか、そしてどうすればうまく値を渡せるのかを解決していただきたい。
vue.jsとNuxt.jsに詳しい方がいらっしゃいましたら是非ご教示願います。

Answer 1

エラーメッセージが画像から見切れていますが、
おそらくSyntaxError: Unexpected token .ではないですか。

オブジェクトリテラルのvalue省略形を使おうとしていますが、
この形はpropertyと同じ名前の変数をvalueとして使うときに重複表現を削るためのものです。
ドット演算はできません(SyntaxError(構文エラー)の原因)。

var prop = 0;
var obj = { prop }; // { prop: prop }の省略形

holicさんの場合は、渡すべきオブジェクトは{ this.formData: this.formData }ではなく、{ formData: this.formData }だと思います。

Comments

[holic]

ご丁寧な解説ありがとうございます。
NozumuIkuta様のご指摘通りで無事に作動しました。