monteecristoo’s blog

https://twitter.com/irakaarozo

toto random generator

resultタブを開くと0~2の数字がランダムに13個出力されます。 もう一度出力したい場合は他のタブを開いた後、resultタブを開いてください。 

 

楽天toto

 

VueJS 子コンポーネントに値をパスするときの謎の挙動

responseは[{prop1: {}, prop2: {}},

      {prop1: {}, prop2: {}}]  とする

messages ではこのresponse をすべて格納して modifiedMessages ではprop2を削除して格納したい。

 

@messages.vue 親コンポーネント

<app-messages v-for="message in messages"

  m=message

  key=message.id >

 

mounted() {
  axios.get('getMessages').then(response => {

    this.messages = response.data;

    const target = response.data;

    for(var i =0; i < target.length; i++) {

      delete target[i].prop2;

    }

    this.modifiedMessages = target;

})

 

@message.vue 子コンポーネント

{{ m.prop2 }} エラー

 

>>> this.messages, this.modifiedMessages ともにprop2が消滅している。

 

mounted() {
  axios.get('getMessages').then(response => {

    this.messages = response.data;

    return response.data;

}).then(response => {

  const target = response;

  for(var i =0; i < target.length; i++) {

    delete target[i].prop2;

  }

  this.modifiedMessages = target;

}); 

 

@message.vue 子コンポーネント

{{ m.prop2 }} OK

 

>>> this.messages, this.modifiedMessages ともにprop2が消滅している。

したがって vue debugger 上では m のprop2 は表示されていない。にもかかわらずちゃんとprop2 が子コンポーネントにパスされ、正常に{{ m.prop2 }} が動作している原因は不明。

 

 

VueJs: method 内で setTimeout を使い setTimeout 内で他に定義した method を呼び出す方法

methods: {

  testFunc() {
     console.log('OK');

  }

},

mounted() {
  setTimeout(function(){

    this.testFunc();  // エラー

  }, 1000);

}  

 

this.testFunc() だとエラー。以下に訂正

mounted() {

  var self = this;
  setTimeout(function(){

    self.testFunc();  // OK

  }, 1000);

}

 

参考:

stackoverflow.com

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 のファイル由来をはっきりさせるた命名ルールを設けたほうがいい

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 を設定してコマンドのショートカットを作る

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

sudo sdparm --command=stop /dev/sda1

のショートカットを作る

>>>>

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

>>> alias

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

sudo nano /.bashrc

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

(raspberry pi の場合元々 .bashrc は無いので新規作成になる)

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

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

保存 

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

>>> alias 

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