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

また、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>