vue-mqでレスポンシブ対応

vue-mqをインストール
$ yarn add vue-mq


vue-mqをインポートしてブレイクポイントを設定
// hello_vue.js

import VueMq from 'vue-mq'

Vue.use(VueMq, {
  breakpoints: {
    sm: 600,
    md: 900,
    lg: Infinity
  },
  defaultBreakpoint: 'lg'
});


テンプレートで使う
<template>
  <div>
    <div v-if="$mq === 'lg'">
      large
    </div>
    <div v-if="$mq === 'md'">
      middle
    </div>
    <div v-if="$mq === 'sm">
      small
    </div>
  </div>
</template>



参考記事:【Vue + vue-mq】レスポンシブ対応でのVue実装について - Qiita

vuex-persistedstateでリロードしてもvuexのステートデータを保持

vuex-persitedstateをインストール
$ vuex-persistedstate


storeファイルにインポートして設定を記載
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import articles from './modules/articles'
import users from './modules/users'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    articles,
    users
  },
  plugins: [createPersistedState(
    {
      paths: ['articles.article'],
      storage: window.sessionStorage
    }
  )]
})


参考記事:
【Vue】リロードしても大丈夫。そう、vuex-persistedstateならね。 - Qiita

active_model_serializersで同じモデルから出力結果の違う2つのコントローラーを設定する

article_serializers.rb
class ArticleSerializer < ActiveModel::Serializer
  attributes :id, :title, :description
  has_one :region
  has_many :info_blocks

  # article has one region, region has one countryの関連を返す。
  class RegionSerializer < ActiveModel::Serializer
    attributes :id, :name
    has_one :country

    class CountrySerializer < ActiveModel::Serializer
      attributes :id, :name, :currency
    end
  end

  # article has many info_blocks,
  # info_block has many spendings, transportationsの関連を返す。
  class InfoBlockSerializer < ActiveModel::Serializer
    attributes :id, :event, :place, :comment
    has_many :spendings
    has_many :transportations

    class SpendingSerializer < ActiveModel::Serializer
      attributes :id, :genre, :cost
    end

    class TransportationSerializer < ActiveModel::Serializer
      attributes :id, :means, :cost
    end
  end
end


articles_controller.rb
class ArticlesController < ApplicationController
  def index
    @articles = Article.all
    render json: @articles, include: { region: [:country] }
  end

  def show
    @article = Article.find(params[:id])
    render json: @article, include: {info_blocks: %i[spendings transportations]}
  end
end


参考記事:
ActiveModelSerializerでネストしたアソシエーションを出力する方法 - Qiita

vue-routerで遷移時にデータを渡す

router
{
  path: '/article',
  component: ArticleShow,
  name: 'ArticleShow',
  props: true
}


遷移元
<script>
export default {
  props: {
    article: {
      type: Object,
      required: true
    }
  },
  methods :{
    showArticleDetail() {
      this.$router.push({
        name: 'ArticleShow',
        params: {article : this.article}
      })
    },
  }
}
</script>


遷移先
<script>
export default {
  props: {
    article: {
      type: Object,
      required: true
    }
  }
}
</script>


参考記事:
[vue.js] routerでpropsに値を渡してURL遷移する - 1分技術ブログ

vue-momentで日時データをフォーマット

vue-momentをインストール
$ yarn add vue-moment


vue-momentを取り込む

hello_vue.js

Vue.use(require('vue-moment'));


メソッドを設定

index.vue

<script>
export default {
  data() {
    return {
      date: this.$moment().format()
    }
  }
}
</script>


テンプレートで使う

index.vue

<div id="app">
  <p>{{ 日付データ | moment('M/D(ddd)') }}</p>
</div>


出力

2/22(Mon)


日本語化

hello_vue.js

const moment = require('moment')
require('moment/locale/ja')
Vue.use(require('vue-moment'), {
  moment
})


出力

2/22(月)



参考記事:
Vue.jsで日付のフォーマット変換・比較をするライブラリ「vue-moment」 | カバの樹
GitHub - brockpetrie/vue-moment: Handy Moment.js filters for your Vue.js project.

active_model_serializersで関連テーブルを扱う

テーブル
class Country < ApplicationRecord
  has_many :regions
end
class Region < ApplicationRecord
  has_many :articles
  belongs_to :country
end
class Article < ApplicationRecord
  belongs_to :region
end


gemをインストール
gem 'active_model_serializers'


config/initializersams.rbを作成し以下を記載
ActiveModelSerializers.config.default_includes = '**'


countryを主体にする場合

serializerファイルを作成

bundle exec rails g serializer country


serializerファイルを記載

class CountrySerializer < ActiveModel::Serializer
  attributes :id, :name
  has_many :regions

  class RegionSerializer < ActiveModel::Serializer
    attributes :id, :name
    has_many :articles

    class ArticleSerializer < ActiveModel::Serializer
      attributes :id, :title, :description
    end
  end
end


articleを主体にする場合

serializerファイルを作成

bundle exec rails g serializer article


serializerファイルを記載

class ArticleSerializer < ActiveModel::Serializer
  attributes :id, :title, :description
  has_one :region

  class RegionSerializer < ActiveModel::Serializer
    attributes :id, :name
    has_one :country

    class CountrySerializer < ActiveModel::Serializer
      attributes :id, :name
    end
  end
end

※belongs_toを使うと上手く表示さない


参考記事:
ActiveModel::Serializersでネストされたリソースを扱う - Qiita
Active Model Serializersを試してみる - Qiita