Nuxt.jsとVuex学習

はじめに

Nuxt.jsとVuexの学習内容を記録していきます。

Nuxtは、モダンな web アプリケーションを作成する Vue.js に基づいたプログレッシブフレームワークです。 Vue.js 公式ライブラリ（vue、vue-router や vuex）および強力な開発ツール（webpack、Babel や PostCSS）に基づいています。 Nuxt の目標は、優れた開発者エクスペリエンスを念頭に置き、Web 開発を強力かつ高性能にすることです。

• 公式ホームページ
  • https://ja.nuxtjs.org/guide/installation/
  • https://ja.nuxtjs.org/

コマンド

インストールコマンドは以下のとおり。

npx create-nuxt-app <プロジェクト名> npx create-nuxt-app hello

開発モードで起動方法は以下のとおり。

npm run dev 開発モードで起動

スクラッチでインストールしたい場合のインストールコマンド

npm install --save nuxt

繰り返し処理

<template>
  <section class="container">
    <div>
    <!-- {{users[0].id}},{{users[0].name}}, -->
      <ul>
        <li v-for="user in users" :key="user.id">
          {{ user.id }}, {{ user.name }}, {{ user.company.name }}
        </li>
      </ul>
    </div>
  </section>

</template>

<script>
const axios = require('axios')
let url = 'https://jsonplaceholder.typicode.com/users'

export default {
  asyncData({params, error})
  {
    return axios.get(url)
    .then((res) => {
      return {users:res.data}
      })
      .catch((e => {
        //console.log(e.response.status)
        error({ users: e.response.status, message: e.message })
      }))
  }
}
</script>

Vuexとは

Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。 これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、 アプリケーション内の全てのコンポーネントのための集中型のストアとして機能します。

• 公式ホームページ
  • https://vuex.vuejs.org/ja/

Vuexポイント

アプリケーションの状態を１つの場所に置いて管理する

コード

<template>
  <section class="container">
    <div>
      <p>{{ $store.state.message }}</p>
      <button v-on:click="$store.dispatch('updateMessageAction', 'test')">Dispatch</button>
    </div>
  </section>
</template>

<script>
export default {

}
</script>

import Vuex from 'vuex'

const createStore = () => {
    return new Vuex.Store({
        state: function() {
            return {
                message: "Hello Vuex !!!!"
            }
        },
        mutations: {
            updateMessage: function(state, payload) {
                state.message = payload
            }
        },
        actions: {
            updateMessageAction(context, payload) {
                context.commit('updateMessage', payload)
            }
        }
    })
}

export default createStore