Vuex

Nuxt × TypeScript でTodoListとユーザ認証を実装してFirebase Hostingにデプロイ [Tutorial - Part 3/5 - Bulmaを使ってデザインを整える]

概要

Nuxt×TypeScriptでTodoListを実装し、Firebase Hostingにデプロイするチュートリアルです。簡単なCRUD(Create, Read, Update, Delete)アプリを作成することで、NuxtとTypeScriptの概要を掴んでもらうことが目的です。

Part2までに、環境構築とTodoListの実装を行いました。このPart3では、Bulmaという

もっとみる

Nuxt × TypeScript でTodoListとユーザ認証を実装してFirebase Hostingにデプロイ [Tutorial - Part 2/5 - TodoListを実装]

概要

Nuxt×TypeScriptでTodoListを実装し、Firebase Hostingにデプロイするチュートリアルです。簡単なCRUD(Create, Read, Update, Delete)アプリを作成することで、NuxtとTypeScriptの概要を掴んでもらうことが目的です。

Part1では「環境構築とHelloWorldの表示」までを行いました。このPart2では、Todo

もっとみる

Vuexでの管理を最小限にする

ストアとコンポーネントのつながりを最小限にすることで変更に強くする

2種類あるらしい。

①表示コンポーネントとコンテナコンポーネントを分ける
②Atomic Design

今回は、①の手法について調べてみた。

①の手法は、Reduxの作者Dan Abramov氏が提唱したReactコンポーネントと同様の分類パターン。
表示コンポーネントは見た目を表現するコンポーネントなのでストアにアクセス

もっとみる

Vuexのきほんの「ほ」

前回、Vuexの基本をざっと説明しました。

今回は、Actionsでの非同期処理について解説します。
例えば、ActionsからJSONオブジェクトをAjaxで読み込む場合、下記のようにします。

mutations: { addList(state, payload) { state.list = payload }},actions: { async addL

もっとみる

Vuexのきほんの「き」

Vuex(ビューエックス)。Vue.jsと共に使うライブラリです。
Webアプリケーションの状態を保持・更新する役割を担います。
例えば、hosonoという名前と33歳という年齢を保持するデータがあったとします。

{ name: 'hosono', age: 33}

このデータをVuexでは以下のように表現します。

const store = new Vuex.Store({

もっとみる

Vuexを使ったカウンターアプリ

はじめに

ぷろぐらみんぐ初心者です。ここ最近、JavaScriptフレームワーク「Vue.js」にハマっています。今回は、Vue.jsに特化した状態管理ライブラリ「Vuex」の勉強がてらに「Vuex」を使ったカウンターアプリを作ってみました。
お手数おかけしますが指摘事項などありましたら、どんどん指摘おねがいします。

はじめに storeの読み込み(main.js)

import App f

もっとみる