AWS Amplify Vue.js vuetifyでサンプル実装

ついに始動

AWSソリューションアーキテクトの勉強等もあり、プロジェクトの構想からはずいぶんと時間が経ってしまいましたが、 いよいよ本格的にオリジナルアプリの開発に着手しました。

まずは基盤づくり

https://qiita.com/shunp/items/d491adfadd570f66f990

こちらの記事を参考にプロジェクトのセットアップを行いました。 ただし、私の場合はBuefyではなくvuetifyを使うため、vuetify公式サイトを参照しながら必要な部分は書き換えています。

<template>
  <div>
    <nav class="level">
      <div class="level-item has-text-centered">
        <v-form ref="form">
          <v-text-field v-model="input.name" label="Task"></v-text-field>
          <v-text-field v-model="input.description" label="Description"></v-text-field>
        </v-form>
      </div>
      <div class="level-item has-text-centered"></div>
    </nav>
    <button class="button is-link" @click="createTodo">ADD</button>
    <ul id="todo">
      <li v-for="todo in todos" :key="todo">
        <span class="todo-wrapper">{{ todo.name }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { API, graphqlOperation } from "aws-amplify";
import * as mutations from "@/graphql/mutations";
import * as queries from "@/graphql/queries";

export default {
  name: "todo",
  data: function() {
    return {
      input: {
        name: "",
        description: ""
      },
      todos: []
    };
  },
  created: async function() {
    await this.listTodos();
  },
  methods: {
    createTodo: async function() {
      if (this.input.name !== "" || this.input.description !== "") {
        await API.graphql(
          graphqlOperation(mutations.createTodo, { input: this.input })
        ).catch(err => console.error(err));
        await this.listTodos();
      } else {
        console.info("input empty");
      }
    },
    listTodos: async function() {
      const res = await API.graphql(graphqlOperation(queries.listTodos)).catch(
        err => console.error(err)
      );
      this.todos = res.data.listTodos.items;
    }
  }
};
</script>
<style scoped>
</style>

import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'
import store from './store'
import Amplify, * as AmplifyModules from 'aws-amplify' // 追記
import { AmplifyPlugin } from 'aws-amplify-vue' // 追記
import aws_exports from './aws-exports' // 追記
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
Amplify.configure(aws_exports) // 追記

Vue.use(AmplifyPlugin, AmplifyModules) // 追記

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

動作確認

タスクの名前と説明を入力して「ADD」をクリックすると、タスクリストに入力した値が表示されました。

勉強メモ

・async await ・createdのタイミング