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
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.
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 have 2 non parent/child components.
I'd like to run a function on component A by clicking a button on component B.
I know that the eventbus is a solution but because I am already using Vuex I would like to do it the Vuex way but could not find an example on the internet.
Have component A mutate some state that component B is watching. When component B see's a change to that state, run your function.
The mutation could be as simple as flipping a boolean or incrementing a number. Anything to trigger the watch in the other component.
Here is how to setup the watch: https://stackoverflow.com/a/44347195/1409310
I have just 2 Components at any given point in time
a global component to store all the common data
and a child component which changes based on vue-router.
Is there a real need to add vuex complexity in my case.
I don't think you'll benefit from Vuex in this case.
You can just use props and custom events.
Im working on a Vue component that will be re-used in different projects (and will be available via npm install ...) and have principal question how the event emitting is handled.
The component itself contains few nested children elements like:
component-parent
|-child 1
|-child 2
|-child 3
|-child 4
When the component is included in some project then component-parent will expose all events that are emitted from the whole component. And was wandering how the in-component events are passed to the component-parent. For example if i want to pass event from child 4 to component-parent then child 4 emits to child 3 which emits to child 2 which finally emits to component-parent.
Such workflow is working fine but it doesn't look very practical.
Ive found out that EventBus can be used and seems more elegant solution but also seems that its not very popular. Is EventBus can be used freely or its considered to be a bit hacky/workaround way?
And another question regarding using vuex. If vuex is included in the component itself is it possible to emit from it to the project component (that have my component included)? Including vuex in my component will lead the main project to have two vuex instances. Is there are blockers for having multiple stores like this?
After some testing I've decided to go with EventBus. EventBus allows sending/receiving events between components. The components can be part of the same parent tree or on a complete different one. More information here
But in general event-bus.js file should be created
import Vue from 'vue';
export const EventBus = new Vue();
And then imported in any component that will use the EventBus mechanism
<script>
// Import the EventBus we just created.
import { EventBus } from './event-bus.js';
...
Then from the sending component emit the event
EventBus.$emit('i-got-clicked', this.clickCount);
Any component that have loaded EventBus can listen for events like this:
EventBus.$on('i-got-clicked', clickCount => {
console.log(`Oh, that's nice. It's gotten ${clickCount} clicks! :)`)
});
To stop listen for events:
EventBus.$off('i-got-clicked');
Personally i find EventBus quite easy and useful but I'll probably use them only when developing components that will be included in another projects. For the same project components Vuex is more than enough