How change meta tag "theme-color" on change Vuex state?
Using: Vue, Vuex, register-service-worker, #vue/cli-plugin-pwa
You should dispatch an event, inside of it, in your store file, change the meta tag like so:
document.querySelector('meta[name="theme-color"]').setAttribute("content", yourValueHere);
More info: https://stackoverflow.com/a/36073112/2745485
Related
Hey there short question I do use a BootstrapVue table and the data it shows is provided by a vuex getter invoked at the mounted hook.
Why is it not possible to use the standard sort option provided by the component (b-table) itself?
If I do the same in a method with a axios.get it works perfectly. I think it has to do with vuex state management but I'm not sure.
How do I access the store on the Vue instance. Essentially, I and to do something like this:
Vue.store.dispatch('someAction')
or
Vue.$store.dispatch('someAction')
if you added vuex in your main.js
so you can do this.$store.dispatch('someAction')
also see this from vuex documentation
I'm having a situation where I use a specific Vue component in multiple ways. Sometimes I initialize it as an SPA with new Vue({store}) and sometimes I use it from within another vue component.
E.g.
<template>
<component/>
</template>
How would I go about attaching a vuex store to the component in the above situation? Manually overriding the $store property obviously does not work and the Vue instance itself doesn't really shed any light on the matter. Is there a way to achieve this?
I've written a simple store factory which creates a new instance of the vuex store but I need a way to attach this to a component from within a vue template/comp.
Said component is complex enough to warrant vuex.
Apparently setting the $store property manually does do the trick.
this.$store = store
I want to do this.$router.push(path) inside module file of vuex.
As this is not defined there, how could I perform this.
Just import the router and you'll be able to use it, like this:
import router from 'path/to/router'
router.push(path)
Why does it work like this:
In a Vue file, this is binded to the Vue object which is why you can use certain methods that are available there like $router or $store.
However in a normal JS file this is just binded to the global object that does not contain any of Vue's special functionality, which is why you have to import the router manually.
In my vue cli project I have a route Settings with 3 child components SettingsA, SettingsB and SettingsC. Each child component has ca. 15 input fields, so it would be too many input fields for one single component.
The goal is to get data from a REST backend with an an axios call when the Route Settings is loaded, and populate some of the input fields with the data;
the user can then navigate between the child components and fill/change the input fields, without triggering the axios call which would reload and overwrite the users input field changes.
Since there are 3 child components I use vuex as store. That way the users inputs should not change when he navigates between the child components.
My question is: Where and with what hook should I make the axios call? With beforeMounted on the Settings Component?
Maybe there is also a better, already tried design than mine?
Thanks for your help!
Solution using custom events
You actually not necessarily need vuex. Basic idea is to have parent component Settings, which includes SettingsA, SettingsB and SettingsC, which are displayed conditionally using v-if. The Settings component is holding your state. Changes in the child components form fields trigger events with this.$emit(). The parent component listens to the events and updates its state. The state of the form is passed down via props.
Solution using Vuex actions
If you go the Vuex route, you will trigger actions instead of using this.$emit() and update the global store. You should import the actions using mapActions. In your components you then have access to the global store using this.$store.