Develop Reference

How can I use vue-logger in the vuex store?

I cannot get vue-logger to work in my Vuex store file(s)
I would like to use vue-logger in my Vuex store file (and modules). However, I keep getting the error: "TypeError: Cannot read property 'info' of undefined" when I execute a statement like "Vue.log.info(....)".
I had a similar problem with using "this.$http.get" in the store file, but that works now by using the "Vue.http.get" (as explained in this StackOverflow Answer).
However, "this.$log.info" does not work (for reasons obvious to me now, as in the store I am outside of the vue instance), but neither does "Vue.log.info".
How can I use vue-logger in the store?

Try to use Vue.$log.info.
Notice the extra $ before log.

Service, get & extend in javascript and how are they being used

I am trying to make sense of some code snippets in javascript. But getting way too confused, it seems to be using all the symbols in all possible ways.
import Ember from 'ember';
export default Ember.Route.extend({
metrics: inject.service(),
activate() {
this._trackPage();
},
_trackPage() {
run.scheduleOnce('afterRender', this, () => {
const page = document.location.href;
const title = this.routeName;
get(this, 'metrics').trackPage({ page, title });
});
}
});
q1: What are the keyword service, get, extend? What are they doing here?
q2: Why is activate defining _trackPage separately? Why not put the reschedule code in activate() itself?
Basically trying to understand: https://emberway.io/applying-the-adapter-pattern-for-analytics-in-ember-js-apps-29448cbcedf3

A service is a place to put code that can be used almost anywhere in the app. In order to make the code inside a service available to the script you're working on, you inject it.
get is a helper that is used to access things like the service or Ember objects. In more recent tutorials, you'll see syntax that looks more like this.get('metrics'). See the docs here.
You could put the _trackPackage code into the activate function if you wanted to. However, activate is a special function called a hook, and many developers like to keep their route hooks like activate as short and sweet as possible for stylistic reasons. Hooks are special functions that fire automatically on things like a user entering a route, rerenders, etc. There are many kinds of hooks like this throughout Ember.
Extend is Ember boilerplate that gets created for you when you use the Ember CLI to make new files. Basically, when you create a route, you're extending on Ember's default route configurations, attributes, and methods. So there's some base behavior (like the activate hook) that gets inherited.
I recommend that you read the Ember Guides sections on objects and services for more info.

Vue js 2 - Accessing data in App.vue from child components

I'm pretty new to Vue and I'm trying to create my first app with it (I have worked through a whole tutorial though so it's not like I'm completely new to it). I come from a Java/Grails background so this new "frontend oriented webapps" is still pretty confusing to me. I'm using Vue 2 with webpack.
The problem I'm having is running methods when the app initializes which creates data in the App.vue component (which I'm assuming is the root component, is that correct?) and then accessing this data in child components. So specifically what I'm trying to do is on in the 'created' life cycle hook I want to check if the user is logged in or not and then I want to update my navbar accordingly (show a login button if not, else show the user's name, for example).
I haven't even quite figured out how exactly I'm gonna determine if the user is logged in yet coz so far I've only been trying to create dummy data in the App.vue component and then accessing it in child components. Everywhere that I've researched says that I should use an event bus but (I think) that's not gonna work for me (correct me if I'm wrong) coz the only examples I can find is all $emit functions being called on user events (like button clicks) and I want it to have the data globally accessible (and mutate-able) everywhere all the time.
So I'll try to show you some code of what I had in mind:
App.vue:
...stuff...
data() {
return {
authToken = '',
userdetails = {},
loggedIn = false
}
},
created: function() {
// check browser storage for authToken
if(authToken) {
// call rest service (through Vue Resource) to Grails backend that I set up
// beforehand and set this.userdetails to the data that gets returned
if(this.userdetails) {
this.loggedIn = true;
}
}
}
...stuff...
Home.vue:
<template>
<div class="home">
<nav-bar></nav-bar>
</div>
</template>
...stuff
NavBar.vue:
<template>
<div class="navBar">
<div v-if="loggedIn">Hi {{ userdetails.name }}</div>
<div v-else>Please log in before continuing.</div>
</div>
</template>
Please excuse if any of that code has any mistakes in it, it's just to show more or less what I'm trying to do and I made most of it up right now. So the main question: How do I go about getting the v-if="loggedIn" and {{ userdetails.name }} part to work (coz obviously the way it's set up now that won't work, right?). And then besides that, any general advice on "global variables" and data flow in Vue js will be appreciated coz I believe that my server-side app mentality might not work in front-end javascript apps.

To get Data from parent component you can use this.$parent.userdetails in the child component.
But a much better way is to use props like this
https://v2.vuejs.org/v2/guide/components.html#Passing-Data-with-Props

Lite pattern, not for complex sharing tasks
You can access global app component everywhere (routes, components, nested components) with the predisposed field:
this.$root
Notes for overengineers: It is officially suggested as "lite" approach in vue guide: https://v2.vuejs.org/v2/guide/state-management.html.
Obviously, it is not a architectural patternized solution, but ok for just sharing a variable or two.
In these case this lean approach avoids developer to import a full sharing framework like vuex, heaving development, know-how requirement and page download, just for such a trivial sharing task.
If you dislike lite approaches, even when appropriated and officially suggested, maybe is not how to share the problem, but which framework to use.
For instance, Angular is probably best fitted for heavy engineered approach, and I not mean one is better than the other, I mean different instruments suite best for different task and approaches, I too use it when need to realize a heavier and more complex solution, in these case even with vuex I could not handle all the components interaction and realtime data sharing.

Following methods are not recommended by other developers or vue itself.
this.$root;
or
this.$parent.userdetails
In my opinion the best way to share any data across components is using vuex state management.
Here is the official documentation link: https://vuex.vuejs.org/#what-is-a-state-management-pattern

ExtJS 4 Problem with MVC concept

i'm trying to use the new MVC concept and therefore started witht the AccountManager Example (examples/simple). Everything works fine as far as I stick to the tutorial, but I tried to extend it a bit.
I define a border layout in 'Viewport.js' and assign a header component (views/Header.js) to 'north'
and a tab-Panel (views/MainPanel.js) which contains the 'views/user/List.js' as a tab.
Until now everything is ok.
But now i added another store (Profiles.js) and model (Profile.js),
changed the references in code to use profile-store instead of user-store.
I also updated the column-definition, imports ('requires') and everything es that is relevant(at least i think so...).
When i run my app i get a js-error in Observable.js -> addManagedListener-> 'item is undefined' when he tries to invoce the on-method of 'item'.
At first i tried hard to find the mistake i made in the code but I could not find anything,
so i started to play around a little bit and found out,
that it works as soon as I rename the folder 'user' in views/ to 'profile' (of course i had to fix some references in code too).
Is this behavior a bug or is it volitional?
If so can anybody please tell me how this is exactly working?
Thank you very much!

ExtJS looks for the Javascript files based on your model/view/controller declarations.
i.e. if in your tell your controller that you have a store called Profile (via the stores attribute) by default, it is going to look for a file at app_name/stores/Profile.js

The problem was that i had to give my controller a reference to the store and the model.
I didn't do that from the beginning, after my controller had a reference to the view, the view had a reference to the store and the store had a reference to the model.
So I assumed everything is ok.
But it seems to be mandatory to provide this information redundant as far as understand and i can live with that...

Displaying fancy routes in cloudmade based service

I look for a way to display a route in a fancy way using the Cloudmade service.
Currently, I can see computed routes like on this tutorial http://developers.cloudmade.com/projects/web-maps-lite/examples/routing, but I look for a fancier way to do it -- without A and B tags, and with colors, etc.
Is this possible ?
Thanks for your help
Rob

Currently this is not possible unfortunately, the only way to do this is to use the NavEngine API directly and process the JSON responses manually. But we will think about making the CM.Directions class more configurable in future releases, thanks!