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 }} が動作している原因は不明。
ｍethods: {
testFunc() {
console.log('OK');
}
},
mounted() {
setTimeout(function(){
this.testFunc(); // エラー
}, 1000);
}
this.testFunc() だとエラー。以下に訂正
mounted() {
var self = this;
setTimeout(function(){
self.testFunc(); // OK
}, 1000);
}
参考：
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 の 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 を使用するときも同様にファイル名をプレフィックスにして出自がわかりやすくしたほうが良い。
