2021年3月10日水曜日

【備忘録】Nuxt.jsで無限スクロール

 
vue-infinite-loadingを使って無限スクロール

  • yarn add vue-infinite-loading
  • plugin/infiniteloading.js

        import Vue from 'vue'
        import InfiniteLoading from 'vue-infinite-loading'
        Vue.component('infinite-loading', InfiniteLoading)

  • nuxt.config.js
    plugins: [{ src: '~/plugins/infiniteloading', ssr: false }]

  • vue
    <template>

    <div class="infinite-scroll">
    <ul class="infinite-scroll-list">
    <li class="infinite-scroll-list-item" v-for="i in this.count" :key="i">scroll {{ i }}</li>
    </ul>
    <infinite-loading
    ref="infiniteLoading"
    spinner="spiral"
    @infinite="infiniteHandler">
    <div slot="no-results"/>
    </infinite-loading>
    </div>
    </template>
    <script>
    export default {
    name: 'InfiniteScroll',
    data() {
    return {
    count: 20
    }
    },
    methods: {
    infiniteHandler() {
    setTimeout(() => {
    this.count += 20
    this.$refs.infiniteLoading.stateChanger.loaded()
    }, 1000)
    }
    }
    }
    </script>


https://qiita.com/yakiniku0220/items/1b2e960a09a9f085820e

2021年3月8日月曜日

【備忘録】vue.jsでreload

this.router.push()で同じページにredirectできない。代わりにrouter.go()でreloadする。
this.rouer.go({path:/}); 

2021年3月7日日曜日

【備忘録】Nuxt.jsで変数のグローバル化

Nuxt.jsで変数をグローバル化する方法。pluginで初期設定しinject()すれば使えるようになる。

定義:
export default (context, inject) => {

  const $global = {

    firebase: firebase,

  }

  inject('global', $global);

}

参照:
this.$global.firebase



2021年3月6日土曜日

【備忘録】Nuxt.jsで別storeのaction呼び出しと参照方法

Nuxt.jsでstoreを共通化したいとき、storeから別storeのactionやdataを参照方法。

async login({commit, dispatch, getters, rootState}) {

await dispatch('Test/login', null, { root: true });

const u = rootState.Test.id;

return true;

}

2021年3月3日水曜日

【備忘録】Firebaseのemulatorsを使う

いろいろ試してやっとFirestoreがemulatorsに向いてくれたのでメモ。
https://www.memory-lovers.blog/entry/2021/01/17/232930

firebase --version
9.5.0

firebase.jsでemulatorsの設定を追加する。

import firebase from 'firebase'
import "firebase/auth";
import "firebase/firestore";
import "firebase/functions";

if (!firebase.apps.length) {
  firebase.initializeApp(
    {
      apiKey: ,
      authDomain:,
      projectId:,
      storageBucket:,
      messagingSenderId:,
      appId: ,
      measurementId: ,
    }
  )

  // Emulatorの有効化
  if (process.env.NODE_ENV != "production") {
    // Authentication用の設定
    firebase.auth().useEmulator("http://localhost:9099/");
    
    // Cloud Functions用の設定
    const functions = firebase.app().functions("asia-northeast1");
    functions.useEmulator("localhost", 5001);

    // Firestore用の設定
    firebase.firestore().settings({ host: "localhost:8080", ssl: false });
  }
}

export default firebase