Best to give more context to this first.
I am creating an Single Page Application with vuejs, vue-router. When the user logs in the user object is returned from the backend. I am using Laravel 5.4 for the backend. The user object is then sorted on the vue $root instance so it can be accessed anywhere by using this.$root.user.
My only problem is that when I want to edit the user data, I have an edit form in which the user data should be automatically populated with the existing data. This would be fine if I just wanted to do something like this: v-model="this.$root.user.first_name" but I have a form object which helps with validation and making everything more modular.
So in the data return I have this on the router-view component:
data: function() {
return {
form: new Form({
first_name: this.$root.user.first_name,
last_name: this.$root.user.last_name,
country: this.$root.user.country,
preffered_currency: this.$root.user.preffered_currency,
email: this.$root.user.email,
})
}
}
The only problem is that everything is undefined. I'm not sure how to get around the problem so any help which be appreciated. Thanks.
I figured a way to do it.
What I forgot to add is that on refresh of the page obviously vue forgets about all of the current stored data so because of that I have to make a request to the backend to get the current user.
So when the ajax request is made to get the current user I created a new Vue object in which all objects can see and assigned it to Window.Event and created a new Vue instance against that. Window.Event = new Vue({});
Now once the ajax request has returned I did Window.Event.$emit('user', this.user) and on the component which needed the user data I just created an $on event with create().
created() {
Window.Event.$on('user', function(user){
this.form.first_name = user.first_name
this.form.last_name = user.last_name
this.form.country = user.country
this.form.preffered_currency = user.preffered_currency
this.form.email = user.email
}.bind(this));
}
Related
I have question about normal laravel multi form with post action as method based on laravel session. I added in this form component of vue, which is simple city autocomplete. I want load to inputs into fields of this component from session (session()), or old (old()) values, if session exist i want to load from session city and province, but if session doesnt exist, but old laravel values exist I want to load them in this component form, if they doesnt exist, leave fields empty. What's the easiest way to do that?
Get the session and pass a default which would be the old value.
$data = session('session_data_key', $old_value); // however you get the old value is up to you.
Pass it down to your view. If no session is set on the server, it will use the default (if default is null it will not set the auto-complete).
UPDATE
If you are using axios to make calls to a laravel app, before loading the form component (in mounted() {}) do a call to axios to get the value of (session or old value). This is what you'll load into the form.
axios.get('/api/load_dafault').then(resp => {
this.defaultValueToBePassedToField = resp.data.value;
});
The endpoint '/api/load_dafault' or whatever yours is named, will have it's controller like so:
public function loadDefaults()
{
$old_value = ... // however you get it is up to you.
$data = session('session_data_key', $old_value);
}
Do not forget to ensure you set the routes.
I am building a single-page application with Vue and laravel API as backend.
I've tried some packages like Vue Session and it worked well, however in almost every API call I always need to send 2 or 3 parameters that will always be the same (stored in vue-session), like user_id and company_id. I used to manage this with common PHP sessions (Zend_Session with Zend Framework) in my other applications, this way I always have that information stored in my backend session and don't need to send it every time by the frontend
Here's an example of how I used to do it with PHP session
$model->insert(array(
'user_id' => $this->session->user_id, //stored in session
'company_id' => $this->session->company_id, //stored in session
'field1' => $this->getParam('field1'), //frontend param (ajax)
'field2' => $this->getParam('field2') //frontend param (ajax)
));
And here's how I'm doing it with Vue and Laravel
const data = {
user_id: this.$session.get('user_id'), //this is what i'm trying to get rid of
company_id: this.$session.get('company_id'), //this is what i'm trying to get rid of²
field1: this.field1,
field2: this.field2
}
axios
.post('/api/some/endpoint', this.data)
.then(resp => {
//...//
})
Basically, in this example I want to not need to always send user_id and company_id as a post param.
Is there any way to get better code "reuse" in cases like this?
1, You can save your session data in the cookie. The browser will automatically send your cookie to the server. Don't forget to delete the cookie when the user logout.
2, If you still want to use Vue session or other storages, you can easily create a method that wraps your post method and add user's information to the payload
function postRequest(url, payload) {
payload.user_id = this.$session.get('user_id')
payload.company_id = this.$session.get('company_id')
return axios.post(url, payload)
}
Use this method whenever you want to make a post.
I am currently working on an app that do not support server rendering, so i have to have an empty state when the client loads the app. Then a fetch is dispatched and the state is soon updated.
I have a component (some kind of editor) which should find an object based on a url-parameter. My mapStateToProps function looks something like this:
const mapStateToProps = (state, ownProps) => {
return {
book: state.library.list.find(function(book){ return book.id === ownProps.params.book_id})
}
}
this.props.book is undefined when the component runs getInitialState, so it does not get the update when the state is fetched. I get the following error in the console of my browser when the component loads:
TypeError: undefined is not an object (evaluating 'this.props.book.title')
From there on the editor remains empty, even when the state is received from the server later on.
Any idea of how i can solve this problem?
What you need to do is put a watch when you are loading data from this.props.book to not be an undefined
if(this.props.book) {
//do something with this.props.book
}
Solution: Preload the store on the server
I finally found an answer to my problem. What i did, was to check upon every request if the user was logged in (through JSON web tokens). If the user was logged in, i preloaded the state and sent it with the first request (assigned it to window._PRELOADED_STATE_ with a script tag in the response string).
Then i also added two lines on the client code
const preloadedState = window.__PRELOADED_STATE__
const store = createStore( rootReducer, preloadedState, applyMiddleware(apiMiddleware, thunkMiddleware) );
then the store was updated before the editor component asked for it.
This solution is based on some ideas introduced at redux's home page http://redux.js.org/docs/recipes/ServerRendering.html
I have an Ember app that, rather than using Ember Data, uses our own custom AJAX data layer to talk to an API.
We're able to load two models at once using RSVP - one is a Project object via our API wrapper, the second is an object representing the logged in user. Both are passed into the controller and templates and work just fine.
But I have a need to load a second model, based on a value in the returned Project object.
Once I've loaded a model in my route like this...
App.ProjectUpdateRoute = Ember.Route.extend({
setupController: function(controller, model) {
controller.set('model', model);
},
model: function(params) {
return Ember.RSVP.hash({
// Load Project from API - /myapi/v1/Project/:ProjectID
Project : App.Project.create().findById(params.ProjectID),
// Load current user from local object
User : App.AuthUser,
});
},
});
...I have a Project object (or rather model.Project) with various properties including the ID of the User that owns the project.
Now I'd like to make a second API call to /myapi/v1/User/:UserID to get the User's details.
Everything I've tried - including adding further App.User.create().findById(UserID) calls into the route's setupController function and the controller - results in the correct API call, but it's asyncronous, so Ember carries on rendering the page and I can't show the result of the API call on the page.
So - how, and where in the Ember structure, do I load a second model based on data from the first? How can I get ember to wait for the resolved promise of this second AJAX call?
UPDATE
I've also tried using afterModel:function() which is almost what I need - it makes the second API call in the right place in the app flow, but I still need to add the result into my existing model array:
afterModel: function(model, tranistion, params) {
// Returns the promise but doesn't update 'model'
return Ember.RSVP.hash({
ProjectOwner : App.User.create().findById(model.Project.UserID)
});
}
Chain the promise, and Ember will take the final resultant (from the model hook)
model: function(params) {
return Ember.RSVP.hash({
// Load Project from API - /myapi/v1/Project/:ProjectID
Project : App.Project.create().findById(params.ProjectID),
// Load current user from local object
User : App.AuthUser,
}).then(function(results){
return App.User.create().findById(results.Project.UserID).then(function(user){
results.projectUser = user;
return results;
});
});
},
I am working a project using the AngularJS framework. I am pretty new to using this framework; in the past I have only worked with pure JavaScript and jQuery. The project is a kind of web designer application for a niche market.
As the user moves between pages while designing I want to maintain a session of all the changes they are making.
Now if the user signs in we load the session using data from the database. When the user clicks on save button we update the database with the session data. Someone told me that I can maintain session in Angular similar to backbone. Is this possible? If yes, can you please direct me to a tutorial that does not focus on directives or UI? If this is not possible are there other viable options?
Here is a kind of snippet for you:
app.factory('Session', function($http) {
var Session = {
data: {},
saveSession: function() { /* save session data to db */ },
updateSession: function() {
/* load data from db */
$http.get('session.json').then(function(r) { return Session.data = r.data;});
}
};
Session.updateSession();
return Session;
});
Here is Plunker example how you can use that:
http://plnkr.co/edit/Fg3uF4ukl5p88Z0AeQqU?p=preview
Because the answer is no longer valid with a more stable version of angular, I am posting a newer solution.
PHP Page: session.php
if (!isset($_SESSION))
{
session_start();
}
$_SESSION['variable'] = "hello world";
$sessions = array();
$sessions['variable'] = $_SESSION['variable'];
header('Content-Type: application/json');
echo json_encode($sessions);
Send back only the session variables you want in Angular not all of them don't want to expose more than what is needed.
JS All Together
var app = angular.module('StarterApp', []);
app.controller("AppCtrl", ['$rootScope', 'Session', function($rootScope, Session) {
Session.then(function(response){
$rootScope.session = response;
});
}]);
app.factory('Session', function($http) {
return $http.get('/session.php').then(function(result) {
return result.data;
});
});
Do a simple get to get sessions using a factory.
If you want to make it post to make the page not visible when you just go to it in the browser you can, I'm just simplifying it
Add the factory to the controller
I use rootScope because it is a session variable that I use throughout all my code.
HTML
Inside your html you can reference your session
<html ng-app="StarterApp">
<body ng-controller="AppCtrl">
{{ session.variable }}
</body>
You can also try to make service based on window.sessionStorage or window.localStorage to keep state information between page reloads. I use it in the web app which is partially made in AngularJS and page URL is changed in "the old way" for some parts of workflow. Web storage is supported even by IE8. Here is angular-webstorage for convenience.
You would use a service for that in Angular. A service is a function you register with Angular, and that functions job is to return an object which will live until the browser is closed/refreshed. So it's a good place to store state in, and to synchronize that state with the server asynchronously as that state changes.
Typically for a use case which involves a sequence of pages and in the final stage or page we post the data to the server. In this scenario we need to maintain the state. In the below snippet we maintain the state on the client side
As mentioned in the above post. The session is created using the factory recipe.
Client side session can be maintained using the value provider recipe as well.
Please refer to my post for the complete details.
session-tracking-in-angularjs
Let's take an example of a shopping cart which we need to maintain across various pages / angularjs controller.
In typical shopping cart we buy products on various product / category pages and keep updating the cart. Here are the steps.
Here we create the custom injectable service having a cart inside using the "value provider recipe".
'use strict';
function Cart() {
return {
'cartId': '',
'cartItem': []
};
}
// custom service maintains the cart along with its behavior to clear itself , create new , delete Item or update cart
app.value('sessionService', {
cart: new Cart(),
clear: function () {
this.cart = new Cart();
// mechanism to create the cart id
this.cart.cartId = 1;
},
save: function (session) {
this.cart = session.cart;
},
updateCart: function (productId, productQty) {
this.cart.cartItem.push({
'productId': productId,
'productQty': productQty
});
},
//deleteItem and other cart operations function goes here...
});