in my File Map.vue I want to watch a global Variable which can be accessed by GlobalStates.mapState with the default Vue watchers like:
watch: {
'GlobalStates.mapState'(newValue) {
console.log("GlobalStates.mapState has changed");
}
},
This is unfortunately not working. Has anyone an idea to solve this?
Thanks in advance
Related
I am using Nuxt with vuetify.
Vuetify helpfully creates a drawer in the default layout (Pretty cool)
I would like to use a Vuex store to change the state of the drawer contained within the default layout from within a page or component.
I have the following in my store index.js
const createStore = () => {
return new Vuex.Store({
state: {
//Default State
showDrawer:false,
},
});
};
export default createStore
In my default layout I have
<v-navigation-drawer
v-if="$showDrawer.state.show"
Calling that directly works as expected, but is it possible from within a page to mutate the showDrawer state to true?
If so how, assuming its a mutation and committing the change through an action from what I have read but new to Vuex and would very much appreciate some guidance. I am sure there are better ways to solve this but keen to learn how to do this using Vuex if someone is able to offer an example.
Figured it out, in the page I add
beforeCreate() {
this.$store.commit('UPDATE_DRAWER', false);
}
And as a mutation I add
mutations: {
UPDATE_DRAWER(state, payload) {
state.show = payload
}
},
Thanks for looking, am sure I may be getting something slightly wrong still so feel free to let me know if what I am doing is incorrect, all helps with my learning :)
I am pushing route parameter/query changes from a component, and I want to watch changes from another component. I was handling the issue by using below syntax on vue
watch: {
"$route.params.index": function (val) {
console.log(val)
}
}
What is the corresponding syntax in nuxt ?
Thanks in advance.
I am working on something which requires access to a property injected at the top level of a VueJS application. I can access the property by using:
this.$parent.$attrs.propertyname
This works nicely however, I am now wanting to be able to access the same item from a further subcomponent which works the same as above with an additional $parent call. Is there a way I can call this item at the top level in another way?
I have looked at $root and tested using Vue $vm console calls in the browser but doesnt work so far. I suspect theres a really easy way of doing this but I can't find it at the moment.
I have tried:
adding a return method from top level and calling it
$root
setting a prototype outside the vue application at the top level: Vue.prototype.$varname = '' and then attempting to assign on created() to this.$varname = this.mypropertyname
I suspect I am close somewhere or there is something I have missed.
I did plenty of fiddling and I have my answer.
So basically, my application passes data into the app from Laravel at the tag level. I have an overall template file for the app which is where I now set the data with a setter to root.
I will explain with some code:
Laravel:
<v-app token="abcdefg">
<template></template>
</v-app>
Thats the declaration of data passed into the app
On template.vue:
<script>
export default {
name: "template",
created() {
this.$root.setToken(this.$parent.$attrs.token);
}
}
</script>
We access the data and use the setter placed on app.js (root) to assign the data to an accessible $root location
app.js code:
const app = new Vue({
data() {
return {token: ''}
},
moment,vuetify,
router, store,
el: '#app',
methods: {
setToken(token)
{
this.token = token;
},
getToken()
{
return this.token;
}
}
});
A getter and setter available for the whole app to access. I may restrict access to the setter function later on but for now I am happy it works. Suggestions on restricting this will be nice.
Its now accessible via: this.$root.getToken()
I'm building server UI and I'm struggling with components. Maybe someone knows how to stack all components and control all UI with functions?
example
App.vue
chat.vue
hud.vue
player.vue
I need to display all .vue in app.vue
App.vue
import chat from './components/chat.vue'
export default {
name: 'app',
components: {
chat
}
}
chat.vue
export default {
methods: {
test: function() {
console.log("test");
}
}
}
How can I call the function test in the DevTools console, when I run the webiste?
Do you know about the Vue Dev Tools browser extension? That will let you inspect all components on a page and tweak their data/props.
I don't think it will let you call their methods, but if you need to call one of those methods in the console you might try (temporarily, for testing purposes) making a component instance available on the window inside a mounted lifecycle function.
EDIT: Is that your entire App.vue, by the way? I'm thinking maybe I misunderstood your question and you think that...
components: {
chat
}
...means that it should render the component on the page. It only makes it available for the parent component to use. You have to place it inside a <template> to actually render it.
I am trying to create some plugins according to this article:
https://alligator.io/vuejs/creating-custom-plugins/
I have a plugin that needs to run something when the root Vue instance mounts or is created. So far I can only see a way to inject something into all components which is not what I would want.
I simply need to do something when the main Vue instance mounts. How can I do this with a plugin?
The install method from the plugin does not seem to do the trick because this seems to happen before the actual created method.
It's possible to have multiple root Vue components. A "root component" is just a component created with the new syntax and no parent component, so you can detect this as follows:
Vue.mixin({
created() {
if (!this.$parent) {
// This is either the root component or a component
// created with `new` and no parent
}
}
})
It's actually easy to include mixins for just a particular component!
In your component that you want to add the mixin to, just import it like you would anything else, and include an array in your component called mixins like so:
import myMixin from 'src/mixin/myMixin'
export default {
mixins: [myMixin]
}
Then your myMixin code would look like this (don't use Vue.mixin, which is global):
export default {
beforeMount () {
console.log('Your component is about to be mounted!')
}
}