variables
Introduction
When you are building JavaScript based application, you may want to access currently logged-in user’s information, config information, and many more on the clients-side of your application. To make this possible Larakits includes a global object Larakits.state
. By default Larakits includes users
and config
properties in the Larakits.state
global object. You may add your own custom properties on Larakits.state
if it’s required for your application.
Larakits Global Object
You may wish to access your currently logged-in users information on your ReactJS
or VueJS
component. For that you only have to call Larakits.state.user
.
In ReactJS Component:
class Example extends Component {
componentDidMount() {
console.log(Larakits.state.user);
}
render() {
return <div>ExampleComponent</div>
}
}
In VueJS Component:
<template>
<div>ExampleComponent</div>
</template>
<script>
export default {
mounted() {
console.log(Larakits.state.user);
}
}
</script>
Adding Custom Properties
You can include custom properties to Larakits
, Larakits.user
, or Larakits.config
object.
To Larakits Global Object
To register your custom properties to Larakits global object, you have to include your custom properties to Larakits.state
object in resources/views/vendor/larakits/layouts/app.blade.php
:
<script>
var Larakits = {
state: {
user: {!! auth()->user() ? json_encode(auth()->user()->state()) : 'null' !!},
config:{!! $larakits !!},
custom: 'value',
anotherCustom: 'another-custom-value'
}
}
</script>
To Larakits User Object
The Larakits.state.user
object includes all non-hidden
attributes of App\User
class. You can include relationship
data or computed values
to Larakits.state.user
.
Include your custom user properties in the array inside mergeState
function of App\User
class:
/**
* Get all projects belongs to the user.
*
* @return \Illuminate\Database\Eloquent\Relations\HasMany
*/
public function projects() : HasMany
{
return $this->hasMany(\App\Project::class)->latest();
}
/**
* Define user state here.
* You can access the defined state on client-side via Larakits.state.user
*
* @return array
*/
protected function mergeState() : array
{
return [
'projects' => $this->projects()->get()
];
}
To Larakits Config Object
You may include your custom config’s properties in the array inside mergeConfig
function of App\Providers\LarakitsServiceProvider
class:
/**
* Define config state here.
* You can access the defined state on client-side via Larakits.state.config
*
* @return array
*/
protected function mergeConfig() : array
{
return [
'app_name' => config('app.name')
];
}