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
Related
I am following a tutorial on udemy. But instead of using Vue 2 and Vuex I use Vue 3 and Pinia. It works almost. One thing I can't seem to fix like the writer does.
I made a child component that has a click event to delete a task in pinia. The thing is
he uses
#click="$store.dispatch('deleteTask', task.id)"
And he states that you don't need to import the vuex store etc in the child component. But when trying to do this with pinia i always get a deleteTask not defined. When importing the store in the child component it works. Is this even possible with pinia? I us:
#click.stop='useTasks.deleteTask(task.id)'
I got answer from the udemy guy. And i searched on pinia docs for more answers but it seems you always need to import the store in the child component. Not like you could doe with vuex
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.
I am trying to initialize a Vue Formulate Form with some user data that I get from an API via axios inside a Vuex Store in Nuxt. I am using Vue Mapstate to get the store state inside the computed data. The async data is not resolved initially and it seems that the :values property from Vue Formulate is not reacting after a successful response. Is it possible to create a data property that initializes with the asnyc data that I fetch from the API in my component?
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.