Vuejs: $ref で得たデータを孫以降のcomponentと共有する方法

computed: {
  swiper() {
    return this.$refs.swiper.swiper
  },
}

この swiper を孫以降の component で共有したい場合

provide - inject 

>>> provide は data, method しか共有できない

mixin

>>> this.$refs が使えない

Vuex の state で共有

>>>

親 component から mounted() で vuex の action を実行して state に swiper を格納

mounted() で実行した action は chrome の vuejs debugger では Base State に含まれることに注意

Vuex の actions の名前の付け方

大規模開発のため vuex の store.js をモジュール化すると各 component から vuex の action をインポートした際、action がどこのモジュールに含まれているかわからなくなってくる。

 

@store.js

import Vue from 'vue';

import Vuex from 'vuex';

 

import activity from './modules/activity.js';
import friends from './modules/friends.js';
import follows from './modules/follows.js';
import profile from './modules/profile.js';
import recommend from './modules/recommend.js';

 

Vue.use(Vuex);

 

export default new Vuex.Store({
modules: {
  activity,
  friends,
  follows,
  profile,
  recommend,
  stream,
  swiper,
  user,
}
});

 

@modules/profile.js

const state = {
  loadedUser: "",
  loadedUsers: []
};

const getters = {
/* Get current user profile from URL @Profile.vue */
loadedUser(state) {
  return (id) => {
    return state.loadedUsers.find((loadedUser) => {
      return loadedUser.id === id;
    });
  };
},

const actions = {
/* Add user to loadedUsers from profile.vue */
loadUser({ commit }, user) {
  commit('LOAD_USER', user);
}
};

const mutations = {
  'LOAD_USER' (state, user) {
    state.loadedUser = user;
  }
};

export default {
  state,
  getters,
  actions,
  mutations
};

 

@modules/user.js

/* Get and set auth user data */

import {mapGetters} from 'vuex';

  const state = {
    user: {

  },
  userDetail: {

  }
};

const getters = {
  getUser: state => {
    return state.user;
  },
  getUserDetail: state => {
    return state.userDetail;
  }
}

const actions = {
/* from Sidenavbar.vue and Edit.vue */
  user_setUser({ commit }, user) {
    commit('SET_USER', user);
  },
/* from ProfileDetail.vue */
  user_setUserDetail({ commit }, userDetail) {
    commit('SET_USER_DETAIL', userDetail);
  },

  editMode({ commit }) {
    commit('EDIT_MODE');
  },
};

const mutations = {
'SET_USER' (state, user) {
state.user = user;
},
'SET_USER_DETAIL' (state, userDetail) {
state.userDetail = userDetail;
}
};

export const userMixin = {
data() {
editable: false
},
methods: {
editUser() {
this.editable = true;
}
}
}

export default {
state,
getters,
actions,
mutations,
methods: {
...mapGetters({
user: 'getters'
})
}
};

 

@hogeComponents.vue

import {mapActions} from 'vuex';

methods: {
...mapActions({
  setUser: 'user_setUser', ファイル名_actionName とすればどこのファイルに由来するかわかる
  loadUser: 'loadUser', loadUser がどのファイルに含まれるかわからない
  loadRecommends: 'loadRecommends',
}),
},

 

action のファイル由来をはっきりさせるた命名ルールを設けたほうがいい

また、mixin を使用するときも同様にファイル名をプレフィックスにして出自がわかりやすくしたほうが良い。

VueJs データの共有 between parent and child components

親子ならprops で可能だが、孫などには

provide, injection を使う

vuejs.org

ただし共有できるのは data, method で computed はできない。

The provide options allows us to specify the data/methods we want to provide to descendent components.

 

 では、computed のコードを重複したくなかったら・・・

mixins で共有

vuejs.org

linux で alias を設定してコマンドのショートカットを作る

updated: 2018/7/8

 

sdparm を使用して HDD のスピンを制御するときのコマンド

sudo sdparm --command=stop /dev/sda1

のショートカットを作る

>>>>

今あるショートカットの確認

>>> alias

新規にショートカットの登録

cd home/pi

sudo nano /.bashrc 元々ある.bashrc を編集 ls では.bashrc は表示されない ls -a で表示される。

--------------------------------------------------------------------------------------------------------------

 

alias YOUR_SHORTCUT_NAME='sudo nano sdparm --command=stop /dev/sda1'

---------------------------------------------------------------------------------------------------------------

保存 

>>> source /.bashrc (変更の反映)

>>> alias 

作成した alias が反映されているか確認 

Laravel + VueJS : VueJS component 内のどこからでも jquery を使用できるようにする Laravel Mix

updated: 2018/5/2

この記事は検証途中で内容が不正確

方法1 Laravel Mix から

@webpack.mix.js

let webpack = require('webpack');

 

mix.webpackConfig({

  plugins: [

    new webpack.ProvidePlugin({

      $: 'jquery',

      jquery: 'jquery',

      window.jquery: 'jquery'

    })

  ]

});

 これで、 Laravel Mix でコンパイルしたファイルは jquery を参照できるようになる。

 

参考:

stackoverflow.com

https://webpack.js.org/plugins/provide-plugin/#usage-jquery

 

方法2 Laravel Mix でコンパイルされたファイルより前に jquery を読み込む

<body>

  <script src="https://cdn.jsdelivr.net/npm/jquery"></script>

  <script src="{{ secure_asset('js/app.js') }}"></script>

</body>

vueJs responsive screen switcher

updated: 2018/4/27

 

vueJS でスクリーンサイズに応じて処理を切り替えたい場合に関して過去に書いた記事のフォローアップ

monteecristoo.hatenablog.com

 

上記方法だとリロードごとには適用されるが例えばタブレットの縦横を回転させたときなどには適用されない( computed で作ったプロパティが vue 内の dependency に依存しないためリアクティブに値が変化しない??)

 

スクリーンの大小を取得するメソッドを作り、window に addEventListener で画面のリサイズごとにイベントを発火させる。

data() {
return {
isLarge: '',
}
},

methods: {
screen: function () {
if(window.matchMedia('(min-width: 1024px)').matches)
{
this.isLarge = true;
} else
{
this.isLarge = false;
}
}
},
mounted() {

初期値の設定
if(window.matchMedia('(min-width: 1024px)').matches)
{
this.isLarge = true;
} else
{
this.isLarge = false;
}

リサイズされた時のイベント発火
window.addEventListener('resize', this.screen);
},

 

* Vuetify なら onResize() を使用して実装も可能

vuetifyjs.com

 

参考:

forum.vuejs.org

 

raspberry pi 外付けHDD 復旧 can't read superblock ext4 file system

ext4パーティションを作った外付けHDD がfilezilla で転送中にフリーズ 

再起動したら HDD が認識されなくなった

raspberry pi も起動画面で

cannot open access to console the root account is locked

と表示されコンソールも開けなくなったので OS からクリーンインストールし直した

(SDカードを別のPCからファイルを書き換えて直せたかも)

参考:

raspberrypi.stackexchange.com

raspberry pi 側の HDD マウント設定をし直して

@terminal

sudo mount -a 

>>>  mount: /dev/sda1 can't read superblock

 

dmesg 

~~~~~~~~~~~~~~~ sda ~~~~~~~~~~~~~~~~~~~~~

認識はされている

 

sudo mkfs ext4 -n /dev/sda

superblock の箇所が表示される

 

sudo fsck /dev/sda1 -p

自動で破損個所が修復された

 

sudo mount -a

>>> 問題なし

 

参考:

monteecristoo.hatenablog.com

islandcnt.exblog.jp