Using vue-resource in a plugin - javascript

I am trying to put all my vue-resource requests into a separate component/plugin for easy re-use and no duplication, but being new to Vue I am not sure if this is the correct approach.
It seems a little clumsy.
I want to be able to define all my resources in my plugin as well as be able to initialize new sessions and setup the Auth header globally. The following works but I am sure there is a better/cleaner way.
Would appreciate any guidance/advice on the better approach here.
Thanks
Plugin - DataService.js
Created an Init function to setup the global Auth header and then some other properties to store paths and options.
const DataService = {
init : function(newsession) {
this.session = newsession;
Vue.http.headers.common['Authorization'] = newsession;
},
userpath : '/api/users/',
options: {emulateJSON: true},
};
DataService.install = function (Vue, options) {
Vue.prototype.$getUser = function (userid) {
return this.$http.get(DataService.userpath + userid);
}
Vue.prototype.$saveUser = function (user) {
return this.$http.post(DataService.userpath + user.id,{data: user},DataService.options);
}
}
Vue Instance - account.js
Note: I am first initializing my DataService to pass in the new session as well as call it as a Plugin (.use).
DataService.init(session_id);
Vue.use(DataService);
new Vue({
el: '#app',
data: {
user: { id: null, username: null},
session: { },
processing: false,
alert: "",
warning: "",
},
computed: {
},
mounted: function() {
this.loadUser();
},
methods: {
loadUser: function () {
this.$getUser(userid).then(function(response) {
// get body data
var res = response.body;
this.user = res.data;
this.session = res.session;
}, function(response) {
console.error('Error loading user',response);
});
},
saveUser: function () {
this.$saveUser(this.user).then( function(response) {
// success callback
console.log('Saved user',response);
}, function(response){
// error callback
console.error('Error Saving user',response);
});
}
}
});

Related

Vue returning data objects from axios call to controller

I'm using vue in laravel and trying to get a controller function that I'm hitting to return the data so that I can use it in the data() section of my vue template.
I know the controller function returns what I need, but I'm not so sure how I need to handle the return/response in the axios call in order to start placing the data into the data() function in vue
Blade/Vue template
import moment from 'moment'
export default {
name: 'calendar',
data () {
return {
events: [
{
title: 'test',
allDay: true,
start: '2019-08-17',
},
],
config: {
defaultView: 'month',
eventRender: function(event, element) {
console.log(event)
}
},
}
},
created() {
this.fetchTasks();
},
methods: {
fetchTasks() {
axios.get('/landing/tasks' )
.then((response) => {
// handle success
this.assetOptions = response.data;
})
.catch(function (error) {
// handle error
console.log(error);
})
.finally(function () {
});
}
}
}
Route
Route::get('/landing/tasks', 'landingController#getTasks')
->name('landing/tasks');
Controller
public function getTasks()
{
$getTask = Task::getTaskForLanding();
$result = array();
foreach($getTask as $id => $task){
$result[$task->taskt_id][] = $task;
}
}
If you are certain that the Controller returns what you need, the only thing you are missing is declaration of assetOptions. To be able to assign response.data to assetOptions later on, you have to declare it in the data function first.
data() {
return {
...
assetOptions = []; // assuming you are expecting an array
...
};
}
Once that is done, you are all set.

Global loaded data in VueJs is occasionally null

I'm new to VueJs and currently trying to load some data only once and make it globally available to all vue components. What would be the best way to achieve this?
I'm a little bit stuck because the global variables occasionally seem to become null and I can't figure out why.
In my main.js I make three global Vue instance variables:
let globalData = new Vue({
data: {
$serviceDiscoveryUrl: 'http://localhost:40000/api/v1',
$serviceCollection: null,
$clientConfiguration: null
}
});
Vue.mixin({
computed: {
$serviceDiscoveryUrl: {
get: function () { return globalData.$data.$serviceDiscoveryUrl },
set: function (newUrl) { globalData.$data.$serviceDiscoveryUrl = newUrl; }
},
$serviceCollection: {
get: function () { return globalData.$data.$serviceCollection },
set: function (newCollection) { globalData.$data.$serviceCollection = newCollection; }
},
$clientConfiguration: {
get: function () { return globalData.$data.$clientConfiguration },
set: function (newConfiguration) { globalData.$data.$clientConfiguration = newConfiguration; }
}
}
})
and in my App.vue component I load all the data:
<script>
export default {
name: 'app',
data: function () {
return {
isLoading: true,
isError: false
};
},
methods: {
loadAllData: function () {
this.$axios.get(this.$serviceDiscoveryUrl)
.then(
response => {
this.$serviceCollection = response.data;
let configurationService = this.$serviceCollection.services.find(obj => obj.key == "ProcessConfigurationService");
this.$axios.get(configurationService.address + "/api/v1/clientConfiguration").then(
response2 => {
this.$clientConfiguration = response2.data;
}
);
this.isLoading = false;
})
}
},
created: function m() {
this.loadAllData();
}
}
</script>
But when I try to access the $clientConfiguration it seems to be null from time to time and I can't figure out why. For example when I try to build the navigation sidebar:
beforeMount: function () {
let $ = JQuery;
let clients = [];
if (this.$clientConfiguration === null)
console.error("client config is <null>");
$.each(this.$clientConfiguration, function (key, clientValue) {
let processes = [];
$.each(clientValue.processConfigurations, function (k, processValue) {
processes.push(
{
name: processValue.name,
url: '/process/' + processValue.id,
icon: 'fal fa-project-diagram'
});
});
clients.push(
{
name: clientValue.name,
url: '/client/' + clientValue.id,
icon: 'fal fa-building',
children: processes
});
});
this.nav.find(obj => obj.name == 'Processes').children = clients;
The most likely cause is that the null is just the initial value. Loading the data is asynchronous so you'll need to wait for loading to finish before trying to create any components that rely on that data.
You have an isLoading flag, which I would guess is your attempt to wait for loading to complete before showing any components (maybe via a suitable v-if). However, it currently only waits for the first request and not the second. So this:
this.$axios.get(configurationService.address + "/api/v1/clientConfiguration").then(
response2 => {
this.$clientConfiguration = response2.data;
}
);
this.isLoading = false;
would need to be:
this.$axios.get(configurationService.address + "/api/v1/clientConfiguration").then(
response2 => {
this.$clientConfiguration = response2.data;
this.isLoading = false;
}
);
If it isn't that initial value that's the problem then you need to figure out what is setting it to null. That should be prety easy, just put a debugger statement in your setter:
$clientConfiguration: {
get: function () { return globalData.$data.$clientConfiguration },
set: function (newConfiguration) {
if (!newConfiguration) {
debugger;
}
globalData.$data.$clientConfiguration = newConfiguration;
}
}
Beyond the problem with the null, if you're using Vue 2.6+ I would suggest taking a look at Vue.observable, which is a simpler way of creating a reactive object than creating a new Vue instance.
Personally I would probably implement all of this by putting a reactive object on Vue.prototype rather than using a global mixin. That assumes that you even need the object to be reactive, if you don't then this is all somewhat more complicated than it needs to be.

How to fetch data from server in vue js?

I am trying to fetch data from the server using Vue + Vuex + Vue resource.On button click I want to hit Http request and show in list format .I tried like that.Here is my code
https://plnkr.co/edit/EAaEekLtoiGPvxkmAtrt?p=preview
// Code goes here
var store = new Vuex.Store({
state: {
Item: []
},
mutations: {
getItems: function (state) {
}
},
actions: {
fetchData:function (context) {
this.$http.get('/data.json', function(v1users)
{
// this.$set('v1_user',v1users);
});
}
}
})
var httprequest = Vue.extend({
"template": '#http_template',
data: function () {
return {
items: store.state.Item
}
},
methods: {
fetchData: function () {
store.dispatch('fetchData')
},
}
})
Vue.component('httprequest', httprequest);
var app = new Vue({
el: '#App',
data: {},
})
;
any udpdate?
Try using Vue.http.get instead of this.$http.get.
Vuex doesn't have access to $http directly from instance.

Vue.js variable not updating correctly

I am having trouble a variable in vue.js.
Scenario - when a user logs in, I want to set a loggedIn variable to true and set it to false when the user logs out. My code:
index.js:
export default {
state: {
loggedIn : false
},
login() {
var self = this;
var creds = {
username: 'username',
password: 'password'
}
$.ajax({
url: '/login',
type: 'POST',
data: creds,
success: function(response) {
self.state.loggedIn = true;
alert('Logged in!!');
},
error: function() {
alert('Error logging in!');
}
});
},
}
App.vue:
import auth from './index.js';
module.exports = {
data: function () {
return {
loggedIn: auth.state.loggedIn,
}
},
watch: {
loggedIn: function () {
alert('loggedIn value has changed!!!');
}
},
}
As you can see, in App.vue, my loggedIn variable depends on what's imported from index.js. However, it doesn't appear that loggedIn in App.vue is reactive to loggedIn in index.js.
Does anyone know what I might be doing wrong?
Thanks in advance!
In order to make some data reactive, you must set it as the data of a component.
Since auth.state.loggedIn holds a primitive (a Boolean), assigning its value to data.loggedIn simply copies it over to data.loggedIn.
So while data.loggedIn is reactive, auth.state.loggedIn is not. The two are simply never linked up.
The only way to make this work is to assign the whole state object to your data:
module.exports = {
data () {
return {
auth: auth.state,
}
},
watch: {
'auth.loggedIn' () {
alert('loggedIn value has changed!!!');
}
}
};

Transform data before rendering it to template in meteor

I want to return a single document with the fields joined together. That is, a result like as follows
{
_id: "someid",
name: "Odin",
profile: {
game: {
_id: "gameid",
name: "World of Warcraft"
}
}
}
I have a route controller which is fairly simple.
UserController = RouteController.extend({
waitOn: function () {
return Meteor.subscribe('users');
},
showAllUsers: function () {
this.render('userList', {
data: Meteor.users.find()
})
}
});
I've tried changing my data like so:
this.render('userList', {
data: Meteor.users.find().map(function (doc) {
doc.profile.game = Games.findOne();
return doc;
})
});
However, this does not have the intended effect of adding "game" to the user. (and yes, Games.findOne() has a result)
How can you transform the results of a cursor in meteor and iron:router?
Try defining your data as a function so it can be dynamically re-executed when needed.
UserController = RouteController.extend({
waitOn: function () {
return Meteor.subscribe('users');
},
showAllUsers: function () {
this.render('userList', {
data: function(){
return Meteor.users.find().map(function (doc) {
doc.profile.game = Games.findOne();
return doc;
});
}
});
}
});
Given your use of easy search, what might be simpler is just to define a template helper for profile
Template.userList.helpers({
profile: function(){
var game = Games.findOne({_id: this.gameId});
return { game: { _id: game._id, name: game.name }};
}
});
This assumes a single game per user. If you have more than one then you can iterate over a cursor of Games instead.

Categories