Attaching a vuex store from within a vue component - vue.js

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

Related

Accessing pinia store through a parent component

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

BootstrapVue table data not sortable using Vuex getter

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 to get data props from another component in vue js

I have component nabber/header that has a props, and I want to put the props in that component and then want to use that props on another props, how to put that props to get that data and transfer it to another component ? because I want to use that props to CRUD in database ? is that possible that we use $root to get that props which we put on App.vue ??
my components
header = [ props : 'list' ]
shop = add to cart, ( this which I want to transfer it to props list ) and go CRUD , is that possible ??

I suggest learning a bit more about Vuex to solve this problem.
This will give you a logical place to define database related actions that can also provide reactive data to components that will display it. Even if you're relatively new to Vue, learning Vuex sooner rather than later will payoff.
It may also be possible for you to use v-model to extricate some data from one component... but what you've described seems a bit different. It might be worth looking at how to implement v-model on your own components as you become more familiar with Vue!

Custom business objects in vue

I am new to vue and have a few questions around using a simple business object in my vue single page components. Let's stay I have an object called ResultCalculator. This is a simple javascript class that contains my core business logic for calculating something. Now assume I want to use this object in my Home.vue component. My questions are:
1) Is it best practice to simply create a new file called ResultCalculator.js and
export default class ResultCalculator {...}
2) In order to import this into Home.vue I use the import ResultCalculator from '....ResultCalculator.js'
3) In my create method, I simply new up a new object and assign it to this.resultCalculator.
The above is working for me, but is it best practice?
4) Now I'd like to reference some data in vuex state store. I doesn't seem like I simply use this.$store.getter. How do I reference vuex in this component?
Thanks

Sure, just create a js file and import it to your .vue files there is nothing wrong with that.
You can not use this.$store because in ResultCalculator.js this is not vue. You can either pass this.$store as an argument or just simply import your store to ResultCalculator.js

Differences between vue instance and vue component?

I'm new to vue js and have some questions when learning it.
I'm now a little confused about the relationship between its instance and component. As far as I learned, every app build by vue should only have one instance and one instance only, it can have as many components as you like if needed. But recently I've seen a demo, and in that demo it has more than one instance.
So my question is, is that ok to have multiple intances in one app( the demo code works fine, but is that the correct way)? What's the best practice to use instance and component in vue app?

It's ok to have two instances in the same project, however, you probably don't want to do that.
A good scenario is to have one main instance to control your app, specially if you are creating a Single Page Application (SPA). Then use as many components as you want.
Components are a great way to reuse code and keep it organized, and, with Vue.js, is very easy to communicate between your components and your "main" Vue instance.

It depends very much on your situation.
I work on a large web project which is not an SPA. We have a Vue instance for each "silo" of the application. We are slowly transitioning an older project from a mostly jQuery frontend so it's possible that as it evolves We'll be able to condense down to a single Vue instance but we're having no trouble with multiple instances. The ease of using Vue in existing projects was one of the biggest deciding factors in choosing it over another library such as react.
I have taken a different approach with green development, one instance and many components.

There are something in common, and some difference between Vue instance and Vue component.
From Vue docs:
all Vue components are also Vue instances, and so accept the same options object (except for a few root-specific options).
The root Vue instances accept properties like el, router, the Vue components cannot.
The data property in root Vue instances is an object, but in Vue components must be a function.
The design target is different:
A root Vue instance is a Vue application launcher, Vue component is an extension of the Vue instance.
Vue components can create elements to be reused in many places. This is Vue characteristic of componentization mainly reflect point.

Vue instance can associated with and manipulate an element which is already exist.
Vue component more suitable for create new element and reuse it at anywhere.

Think of a Vue Component as a blueprint or set of rules on how to create something that can be inserted into the DOM that the user can interact with.
So when you create a Vue file you are going to define exactly one component with a set of rules that tells Vue how to display stuff on the screen and tells a user how to interact with it.
On the other hand is a Vue instance, its an instance of a Vue component, it represents something that has been inserted into the DOM and is something that a user can interact with.
If you have a background in Object-Oriented Programming, think of a Vue Component as being like a class and a Vue instance as an instance of that class.

What has not been mentioned in previous answers that I will cover in regards to the difference between Vue instance and Vue component is how we define the data property that we are working with.
If we are working with a Vue instance, then we can define the data property as an object or a function that returns an object like so:
With a Vue Component that data property must be a function that returns an object.
So for example this is a Vue component:
export default {
name: "App",
components: {
SearchBar,
VideoList
},
And if we want to make use of data inside of that Vue component, we have to make a function that returns an object.

Vue components extends Vue instances
but Vue instances accept properties like el, router, the Vue components cannot.
best practice:
one Vue instance
many Vue component