Vue.js + Dexie: tableの取得でちょっとハマった件 (未解決)

公開日: Wed, 05 May 2021 | 元記事

Vuejs Dexie tableの取得でちょっとハマった件未解決.md

/* https://github.com/microsoft/vscode/blob/master/extensions/markdown-language-features/media/markdown.css / /---------------------------------------------------------------------------------------------

Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the MIT License. See License.txt in the project root for license information. --------------------------------------------------------------------------------------------/

body { font-family: var(—vscode-markdown-font-family, -apple-system, BlinkMacSystemFont, “Segoe WPC”, “Segoe UI”, “Ubuntu”, “Droid Sans”, sans-serif); font-size: var(—vscode-markdown-font-size, 14px); padding: 0 26px; line-height: var(—vscode-markdown-line-height, 22px); word-wrap: break-word; }

#code-csp-warning { position: fixed; top: 0; right: 0; color: white; margin: 16px; text-align: center; font-size: 12px; font-family: sans-serif; background-color:#444444; cursor: pointer; padding: 6px; box-shadow: 1px 1px 1px rgba(0,0,0,.25); }

#code-csp-warning:hover { text-decoration: none; background-color:#007acc; box-shadow: 2px 2px 2px rgba(0,0,0,.25); }

body.scrollBeyondLastLine { margin-bottom: calc(100vh - 22px); }

body.showEditorSelection .code-line { position: relative; }

body.showEditorSelection .code-active-line:before, body.showEditorSelection .code-line:hover:before { content: ""; display: block; position: absolute; top: 0; left: -12px; height: 100%; }

body.showEditorSelection li.code-active-line:before, body.showEditorSelection li.code-line:hover:before { left: -30px; }

.vscode-light.showEditorSelection .code-active-line:before { border-left: 3px solid rgba(0, 0, 0, 0.15); }

.vscode-light.showEditorSelection .code-line:hover:before { border-left: 3px solid rgba(0, 0, 0, 0.40); }

.vscode-light.showEditorSelection .code-line .code-line:hover:before { border-left: none; }

.vscode-dark.showEditorSelection .code-active-line:before { border-left: 3px solid rgba(255, 255, 255, 0.4); }

.vscode-dark.showEditorSelection .code-line:hover:before { border-left: 3px solid rgba(255, 255, 255, 0.60); }

.vscode-dark.showEditorSelection .code-line .code-line:hover:before { border-left: none; }

.vscode-high-contrast.showEditorSelection .code-active-line:before { border-left: 3px solid rgba(255, 160, 0, 0.7); }

.vscode-high-contrast.showEditorSelection .code-line:hover:before { border-left: 3px solid rgba(255, 160, 0, 1); }

.vscode-high-contrast.showEditorSelection .code-line .code-line:hover:before { border-left: none; }

img { max-width: 100%; max-height: 100%; }

a { text-decoration: none; }

a:hover { text-decoration: underline; }

a:focus, input:focus, select:focus, textarea:focus { outline: 1px solid -webkit-focus-ring-color; outline-offset: -1px; }

hr { border: 0; height: 2px; border-bottom: 2px solid; }

h1 { padding-bottom: 0.3em; line-height: 1.2; border-bottom-width: 1px; border-bottom-style: solid; }

h1, h2, h3 { font-weight: normal; }

table { border-collapse: collapse; }

table > thead > tr > th { text-align: left; border-bottom: 1px solid; }

table > thead > tr > th, table > thead > tr > td, table > tbody > tr > th, table > tbody > tr > td { padding: 5px 10px; }

table > tbody > tr + tr > td { border-top: 1px solid; }

blockquote { margin: 0 7px 0 5px; padding: 0 16px 0 10px; border-left-width: 5px; border-left-style: solid; }

code { font-family: Menlo, Monaco, Consolas, “Droid Sans Mono”, “Courier New”, monospace, “Droid Sans Fallback”; font-size: 1em; line-height: 1.357em; }

body.wordWrap pre { white-space: pre-wrap; }

pre:not(.hljs), pre.hljs code > div { padding: 16px; border-radius: 3px; overflow: auto; }

pre code { color: var(—vscode-editor-foreground); tab-size: 4; }

/** Theming */

.vscode-light pre { background-color: rgba(220, 220, 220, 0.4); }

.vscode-dark pre { background-color: rgba(10, 10, 10, 0.4); }

.vscode-high-contrast pre { background-color: rgb(0, 0, 0); }

.vscode-high-contrast h1 { border-color: rgb(0, 0, 0); }

.vscode-light table > thead > tr > th { border-color: rgba(0, 0, 0, 0.69); }

.vscode-dark table > thead > tr > th { border-color: rgba(255, 255, 255, 0.69); }

.vscode-light h1, .vscode-light hr, .vscode-light table > tbody > tr + tr > td { border-color: rgba(0, 0, 0, 0.18); }

.vscode-dark h1, .vscode-dark hr, .vscode-dark table > tbody > tr + tr > td { border-color: rgba(255, 255, 255, 0.18); }

/* Tomorrow Theme / / http://jmblog.github.com/color-themes-for-google-code-highlightjs / / Original theme - https://github.com/chriskempson/tomorrow-theme */

/* Tomorrow Comment */ .hljs-comment, .hljs-quote { color: #8e908c; }

/* Tomorrow Red */ .hljs-variable, .hljs-template-variable, .hljs-tag, .hljs-name, .hljs-selector-id, .hljs-selector-class, .hljs-regexp, .hljs-deletion { color: #c82829; }

/* Tomorrow Orange */ .hljs-number, .hljs-built_in, .hljs-builtin-name, .hljs-literal, .hljs-type, .hljs-params, .hljs-meta, .hljs-link { color: #f5871f; }

/* Tomorrow Yellow */ .hljs-attribute { color: #eab700; }

/* Tomorrow Green */ .hljs-string, .hljs-symbol, .hljs-bullet, .hljs-addition { color: #718c00; }

/* Tomorrow Blue */ .hljs-title, .hljs-section { color: #4271ae; }

/* Tomorrow Purple */ .hljs-keyword, .hljs-selector-tag { color: #8959a8; }

.hljs { display: block; overflow-x: auto; color: #4d4d4c; padding: 0.5em; }

.hljs-emphasis { font-style: italic; }

.hljs-strong { font-weight: bold; }

Markdown PDF CSS */

body { font-family: -apple-system, BlinkMacSystemFont, “Segoe WPC”, “Segoe UI”, “Ubuntu”, “Droid Sans”, sans-serif, “Meiryo”; padding: 0 12px; }

pre { background-color: #f8f8f8; border: 1px solid #cccccc; border-radius: 3px; overflow-x: auto; white-space: pre-wrap; overflow-wrap: break-word; }

pre:not(.hljs) { padding: 23px; line-height: 19px; }

blockquote { background: rgba(127, 127, 127, 0.1); border-color: rgba(0, 122, 204, 0.5); }

.emoji { height: 1.4em; }

code { font-size: 14px; line-height: 19px; }

/* for inline code / :not(pre):not(.hljs) > code { color: #C9AE75; / Change the old color so it seems less like an error */ font-size: inherit; }

/* Page Break : use to insert page break -------------------------------------------------------- */ .page { page-break-after: always; }

Vue.js + Dexie: tableの取得でちょっとハマった件 (未解決)

Vue.jsのデータ永続化にLocalStrageではなくIndexedDBを使ってみようということで、Dexieを導入。

チュートリアルに従って、まずこんな感じでDatabaseを作成。

async createDB(){ this.db = await new Dexie('testdb'); this.db.version(1).stores({friends: 'name, shoeSize'}); } 当然、この命令を毎回使ってやると書き込み、読み込みともにうまくいくんだけど、version(1)のkey nameを毎回定義しているイメージなのでなんとも気持ち悪い。なので、試しにdb作成後下記に書き換え。

async createDB(){ this.db = await new Dexie('testdb').open(); // storesの行を削除 } 存在しているDBを直接OPENしてやるイメージで、当然動くだろと思っていたら、データの追加や取得を下記コードで実行しようとすると、エラーが出る。

async addData(){ await this.db.friends.put({name:"Hoge", shoeSize:28.0}); }, async getData() { this.testdata = await this.db.friends.where('name').equals('Hoge').toArray(); } エラーメッセージ: TypeError: Cannot read property 'put' of undefined

公式Docのこの書き方(Dexie.[table])に該当すると思うんだけど、tableを毎回storeしなければならないとは当然書いていないし、さすがにそんなことないと思うんだが…

[画像]

logを確認すると、openまではうまくいってそうだけど、tableのアクセスがうまくいってない…

で、Docをさらってみると、もう一つtable関連の命令があった→Dexie.table()

[画像]

変数として結果を保管するのは1.3までは危なかったけど、1.4以降は大丈夫だよ！という感じなので、基本は上のプロパティを使ってよ、メソッドも大丈夫だけど、ということか？

まあ、考えても他に手がないので下記に変更。

async addData(){ await this.db.table('friends').put({name:"Hoge", shoeSize:28.0}); }, async getData() { this.testdata = await this.db.table('friends').where('name').equals('Hoge').toArray(); } これでうまくいった模様…なんでだ？Vue.jsだから？

教えて偉い人！！