Nuxt

Nuxt

Nuxtでローカルストレージにアクセス

まずはvuex-persistedstateをインストールします。 npm install --save vuex-persistedstate nuxt.config.jsのpluginsを修正します。 plugi...
Nuxt

NuxtでVuxeを使うラスト

今回は買い物リストにアニメーションをつけて終わりです。 test.vue <template> <v-container> <v-layout justify-center row> <v-...
Nuxt

NuxtでVuexを使う6

もはやVuexは関係ない記事になってきましたが、このまま完成させます。今回は見栄えを良くするのと、削除機能を実装します。 リストの箇所をv-listにして見栄えを整えて、削除ボタンも用意します test.vue <...
Nuxt

NuxtでVuexを使う5

今回は合計金額と税込金額を表示させるようにします。特段素晴らしい変更箇所はないのでソースを一式載せます test.vue <template> <v-container> <v-layout ju...
Nuxt

NuxtでVuexを使う4

データを保存できるようになったので、今回はデータの取得方法と表示を見直していきます。 computedを使って状態を取得したいと思います。computedは健作すると「計算された」などという意味が出てきます。vue.jsのサイトでは...
Nuxt

NuxtでVuexを使う3

今回はinput要素の文字列を取得して、storeに格納するところを行います。格納する処理自体は前回までで実装済なので、inputの値をどのようにして渡すかという点がポイントになります。 input要素にv-modelをつけることで...
Nuxt

NuxtでVuexを使う2

前回の記事でStoreのmutationsにvueから直接commitしていましたが、公式のTodoアプリを見るとactionを定義して、そこを経由してcommitしていました。 なので、そのように作り変えます。 export...
Nuxt

NuxtでVuexを使用する

NuxtではVuexを簡単使えます。なんかクラシックモードは廃止予定らしいのでモジュールモードのストアを利用します。 今回はTodoリストでなく買い物リストを作ります。 まずは、storeフォルダにlist.jsを作りました。...
Nuxt

Nuxtで画像を表示する

画像ファイルは、assets/img/yokohama.jpgにあるものとします。 <template> <div id="main-top"> <!--<img src="~asse...
Nuxt

Nuxtで非同期処理を簡単にやってみる

API叩いてデータを取得するというのは、axiosを使えば簡単ですが、そのデータを準備するのが面倒。 色々あるが一番手っ取り早くて使いやすいのがこれだった。 このサイトを見ればわかるように数多くのデータを返却してくれるので、こ...