computed()
Computed properties are defined as no-argument functions
参考:
computed同士なら this.foo で定義した computed 同士で値にアクセスできる
computed: {
loadedUser() {
return this.$store.getters.loadedUser(this.$route.params.userName);
},
id() {
return this.loadedUser.id;
}
},
data や method から this.loadedUser.id とアクセスしようとしても
Cannot read property 'id' of undefined
エラーが出る
@relationships.php
public function res_recommend() // users not follow
{
$fs = $this->follows()->get(); // Auth_userがfollowしているuser
$follows = array();
foreach($fs as $f) {
array_push($follows, $f->target_id);
}
array_push($follows, $this->id);
$users = \App\User::whereNotIn('id', $follows)->paginate(3); // $follows以外のuser
return $users;
}
@someMixin.js
export const someMixin = {
data() {
return {
},
methods: {
},
computed() {
}
@someComponent.vue
import { someMixin } from './someMixin';
export default {
mixins: [someMixin]
}
#174
global mixin はすべてのsingle vue instance 生成時に影響が出るので注意
mixin life cycle
<script src="https://unpkg.com/vue"></script>
<div id="app">
<div class="demo" @click="attachRed = !attachRed" :class="divClasses"> </div>
<div class="demo"></div>
<dv class="demo"></dv>
</div>
new Vue({
el: '#app',
data: { attachRed: false, },
computed: {
divClasses: function() {
return { red: this.attachRed, blue: !this.attachRed };
}
}
});
or other way
demo3 が2つのクラスを持てることに注意
state
data をとどめておく場所。どの component からも this.$store.state.hoge からアクセス可能
getters
state を加工したい場合使用。同じ加工を複数の component で使用したい場合、code の duplicate を防ぐ。どの component からも this.$store.getters からアクセス可能
actions
import mapActions from 'vuex';
methods: {
...mapActions({
loadUser: 'loadUser'
}),
ORMにfunctionを追記出来るがreusableでなく、肥大化することがあるためtraitsを使うことがある。
TraitsやORMのfunctionはmethod chainやORM向けのmethodを使用できる点で優れる。
@App\foo.php (ORM)
use App\Traits\Friendable;
class User extends Authenticatable
{
use Notifiable;
use Friendable;
@App\Traits\Friendable.php
<php?
namespace App\Traits;
trait friendable {
public function hello {
return "Hello World!";
}
}
@web.php
Rotue::get('/hello', function() {
return Auth::user()->hello();
});
kati #9
参考:
Laravel内に設置型のVue.js component内からLaravelのAuth::routesを使う方法
* vue component内にはlaravel blade template が使えないので {{ route('logout') }} 等の便利なディレクティブが使えない。
通常の {{ route('logout') }} で発行されるHTMLを見てみると…
<li>
<a href="http://YOUR HOME PAGE/logout" onclick="event.preventDefault();
document.getElementById('logout-form').submit();"><i class="fa fa-sign-out"></i>
Logout
</a>
<form id="logout-form" action="http://YOUR HOME PAGE/logout" method="POST" style="display: none;"><input type="hidden" name="_token" value="WrMYReqTjHiHSoVBbIjxdnvCVhj0y70FvQ4BdeZQ"></form>
</li>
token付きでPOSTしているので手動でcsrf token を設定する必要がある。
@Vue component
<template>
<a href="/logout" onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
<i class="fa fa-sign-out"></i>
Logout
</a>
<form id="logout-form" action="/logout" method="POST" style="display: none;">
<input type="hidden" name="_token" :value="csrf_token">
</form>
</template>
<script>
var csrf_token = $('meta[name="csrf-token"]').attr('content');
export default {
data() {
return {
token: csrf_token
}
}
}
</script>
参考：
