前提・実現したいこと
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などは割愛しております)
vue
1<template> 2 <section class="container"> 3 <div slot="header" class="clearfix"> 4 <h2 v-if="isLoggedIn">ログインしてます。<span v-if="user">【{{ user }}】さん</span></h2> 5 <h2 v-else="isLoggedIn">ログイン無。</h2> 6 </div> 7 <form> 8 <div class="form-content"> 9 10 <!-- vuetifyを使用してます。 --> 11 <v-text-field 12 label="ユーザーID" 13 v-model="formData.id" 14 ></v-text-field> 15 </div> 16 17 <v-btn @click="register()">新規ID作成</v-btn> 18 </form> 19 </section> 20</template> 21 22<script> 23import { mapGetters } from "vuex"; 24 25export default { 26 asyncData() { 27 return { 28 isCreateMode: false, 29 formData: { 30 id: null 31 } 32 }; 33 }, 34 methods: { 35 async register() { 36 await this.$store.dispatch("register", { this.formData }); 37 } 38 }, 39 computed: { 40 ...mapGetters(["user", "isLoggedIn"]) 41 }, 42}; 43</script>
#####store/index.js
js
1import Vuex from 'vuex' 2 3export const state = () => ({ 4 isLoggedIn: false, 5 user: null 6}) 7 8export const getters = { 9 isLoggedIn: state => state.isLoggedIn, 10 user: state => state.user 11 12} 13 14export const mutations = { 15 setUser(state, user) { 16 state.isLoggedIn = true 17 state.user = user 18 }, 19} 20 21export const actions = { 22 async register({ commit }, { formData }) { 23 const user = formData.id 24 commit('setUser', user) 25 } 26} 27
##問題になっているのは
ユーザー名を打ち込んだときに、asyncDataのformData.idに双方向性バインディングで値がセットされます。
そのセットされた値をdispatchの引数に持たせたいのです。
await this.$store.dispatch("register", { this.formData });
ですが、下記の通りのエラーが出てしまいました。
###考察
await this.$store
{ this.formData });
上記2つのthisがありますが、これらが実際に何を指している「this」なのかわかっていないです。。
this.formDataがasyncDataの値をセットしてくれていないのだなとはエラーから察しました。
これらのthisが何を指しているのか、そしてどうすればうまく値を渡せるのかを解決していただきたい。
vue.jsとNuxt.jsに詳しい方がいらっしゃいましたら是非ご教示願います。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/11 10:30