nuxtjsでvuexを使ってみる

はじめに

• 最近、nuxtjsを触っているので、vuexを使ってみる

px-wing.hatenablog.com

px-wing.hatenablog.com

storeの設定

• store/auth.jsというファイルを作成して下記のように記述する

export default {
  namespace: true,
  state: () => ({
    loginAccount: '',
    passWord: [],
  }),
  mutations: {
    setDateForm (state, params) {
      state.loginAccount = params.loginAccount
      state.passWord = params.passWord
    }
  }
}

pageの設定

<template>
  <v-app id="inspire">
    <v-content>
      <v-row justify="center">
        <v-col cols="6">
          <v-card>
            <v-card-title>ログイン画面</v-card-title>
          </v-card>
        </v-col>
      </v-row>
      <v-row justify="center">
        <v-col cols="6">
          <v-form ref="form" v-model="valid" lazy-validation>
            <v-text-field v-model="loginAccount" :rules="loginAccountRules" label="ログインアカウント" required />
            <v-text-field v-model="passWord" :rules="passWordRules" label="パスワード" required />
            <v-btn :disabled="!valid" color="success" class="mr-4" @click="validate">
              ログイン
            </v-btn>
            <v-btn color="error" class="mr-4" @click="reset">
              リセット
            </v-btn>
          </v-form>
        </v-col>
      </v-row>
      </div>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>

export default {
  data () {
    return ({
      valid: true,
      loginAccount: '',
      loginAccountRules: [
        v => !!v || 'ログインアカウントは必須項目です'
      ],
      passWord: '',
      passWordRules: [
        v => !!v || 'パスワードは必須項目です'
      ]
    })
  },
  methods: {
    validate () {
      if (this.$refs.form.validate()) {
        this.$store.commit('auth/setDateForm', { loginAccount: this.loginAccount, passWord: this.passWord })
        this.$router.push('/dashboard')
      }
    },
    reset () {
      this.$refs.form.reset()
    }
  }
}
</script>

• 次のページで下記の

   <div>
    {{ $store.state.auth.loginAccount }}
    {{ $store.state.auth.passWord }}
   </div>

画面イメージ