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.
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
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
So i know how Vuex implements two way data binding using set() and get methods on the computed property of the component. i.e return the store state or the relevant geeter in the get() method and commit a mutation in the set method which then mutates the state value. I also know how to use mapGetter() helper from Vuex to simply map Vuex getters to the computed property of the component.
My question is how to implement two way data binding when mapGetter helper is used without writing set and get methods for the computed property.
One of the best vue packages around
https://github.com/maoberlehner/vuex-map-fields
Taken from the package description
Enable two-way data binding for form fields saved in a Vuex store.
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