Todo.vue

<template>
  <v-container>
    <v-btn to="/add" fixed dark fab bottom right color="pink">
      <v-icon>mdi-plus</v-icon>
    </v-btn>
    <v-layout wrap>
      <v-flex md-12>
        <div v-if="sortedTodos.length === 0" class="headline text-center my-12">
          <v-icon>mdi-anchor</v-icon>
          <span class="pl-2 pr-2">[タスク]は空です</span>
          <v-icon>mdi-watch</v-icon>
        </div>
        <v-card v-for="todo in sortedTodos" :key="todo.id">
          <v-card-title>{{ todo.name }}</v-card-title>
          <v-card-text>
            <v-simple-table class="todo-datails text-center">
              <tbody>
              <tr>
                <th>期限</th>
                <!-- <td>{{ todo.deadline.format('YYYY-MM-DD HH:mm') }}</td> -->
                <td>{{ todo.deadline }}</td>
              </tr>
              <tr>
                <th>見積もり時間</th>
                <td>
                  <div class="estimate_time__input">
                    <span class="v-label theme--light">短い</span>
                    <div class="estimate-time__slider">
                      <v-slider
                        v-model="todo.estimate"
                        id="estimate-time"
                        min="1"
                        max="100"
                        readonly="readonly"
                      ></v-slider>
                    </div>
                    <span class="v-label theme--light">長い</span>
                  </div>
                </td>
              </tr>
              </tbody>
            </v-simple-table>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn text @click="doneTodo(todo)">
              <v-icon>mdi-check</v-icon>
              <span class="ml-2">完了</span>
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-flex>
    </v-layout>
    <button v-on:click="getAll">GetALLLLLL2</button>
  </v-container>
</template>

<style>
  .container {
    margin-bottom: 5em;
  }

  .todo-datails tr {
    background: none !important;
  }

  .estimate_time__input {
    align-items: center;
    display: flex;
  }

  .estimate-time__slider {
    flex: 1;
  }

  .estimate-time__slider .v-input__slot {
    margin-bottom: 0;
  }

  .estimate-time__slider .v-messages {
    display: none;
  }
</style>

<script>
import push from 'push.js';
import moment from 'moment';
import uuid from 'uuid/v4';

export default {
    data() {
        return {
            sortedTodos: [],
        };
    },
    methods: {
        doneTodo(todo) {
            this.$store.commit('removeTodo', todo);
        },
        findRecommendedTodo() {
            const todo = this.sortedTodos[0];
            if (todo === undefined) {
                return null;
            }
            
            return todo;
        },
        loadDB: async function (storeName, id) {
            return new Promise (
                function (resolve, reject) {
                    var request = indexedDB.open (storeName, id);
                    request.onerror = (event) => {
                        console.log (event);
                        reject ("error");
                    };
                    request.onupgradeneeded = (event) => {
                        console.log ("!!!!!!!!!!! not found")
                        console.log (event);
                        event.target.transaction.abort ();
                        reject ("not found");
                    }
                    request.onsuccess = (event) => {
                        console.log ("loaded");
                        var  database = event.target.result;
                        console.log (database);
                        resolve (database)
                    }
                }
            )
        },
        getAll: async function() {
            // indexedDB を開きます。
            let res = "hoge!";
            // await this.loadDB ("task_cabinet");
            let request = await this.loadDB ("task_cabinet");  // indexedDB.open('task_cabinet', 3);
            console.log ('Here is the database!')
            console.log (request);
            // request.onerror = (event) => {
            //     console.log ("[DB]: ERROR")
            //     console.log (event);
            //     res = event;
            // };
            // request.onupgradeneeded = (event) => {
            //     console.log ("!!!!!!!!!!! not found")
            //     console.log (event);
            //     event.target.transaction.abort ();
            //     reject ("not found");
            // }
            // request.onsuccess = (event) => {
            //     console.log ("[DB]: SUCCESS")
            //     console.log ("1. this is indexedDB");
            //     let dbitem = event.target.result
            //     console.log (event.target.result)
            //     res = dbitem
            // };
            let tx = request.transaction (["task"], "readwrite");
            let store = tx.objectStore ("task");
            let dbarray = await store.getAll ();
            let result = new Promise ((onSuccess, onFailed) => {
                console.log ("state", dbarray.readyState)
                dbarray.onsuccess = function (e) {
                    console.log ("GET success");
                    result = e.target.result;
                    onSuccess (result);
                }
            })
            result.then ((result) => {
                console.log (result);
            })
            let result2 = await result;
            console.log ("result2",  result2);
            // dbarray.onsuccess = (event) => {
            //     result = event.target.result;
            // }
            console.log ("dbarray", dbarray);
            return result2
            // return request
        }
    },
    async created() {
        // this code is from https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise
        console.log ("What's this?")
        // let res = await this.getAll ();
        let res = await this.getAll ();
        this.sortedTodos = res;
        console.log ("res",  res);
        console.log ("storedTodos",  this.storedTodos);
        console.log ("This is async ending")
        
        // let todo = res [0];

        // console.log ("0th res", res);
        // push.create(todo.name, {
        //     body: todo.deadline.format('YYYY-MM-DD HH:mm'),
        //     onClick: () => {
        //         window.focus();
        //         this.close();
        //     },})
    },
    // mounted () {
    //     //TODO: 動け
    //     this.intervalId = setInterval(() => {
    //         const todo = this.findRecommendedTodo();
    //         if (todo === null) {
    //             return;
    //         }
            
    //         push.create(todo.name, {
    //             body: todo.deadline.format('YYYY-MM-DD HH:mm'),
    //             onClick: () => {
    //                 window.focus();
    //                 this.close();
    //             },
    //         });
    //     }, 10 * 1000);

    //     console.log ("8. sortedTodos?");
    //     console.log (this.sortedTodos);
    // },
    beforeDestroy() {
        clearInterval(this.intervalId);
    },
};
</script>

この場合、Mountの実行が先になっていて、getAll() は後に実行されてしまっている。
つまるところMountでは Promize が返ってくる。

Revision 2の場合

この出力を見る限り、create or mount 内部で indexedDB を叩いている分には”正しいデータ”は返ってくる。
しかし create ないで関数の中身を呼んでも mount より遅く実行されてしまう。

Revision 3 の場合

この結果から、getAll 関数は正しくAsyncしている可能性が考えられる。
どちらかというと indexedDB.open 関数のイベントが正しく動作していないように見える

Revision 5 の場合

storedTodos には値が入っていないが、getAll 関数を同期で動かすことはできた。

Revisions 6
多分動く