I am coding a web app with vuex and firestore. In my main.js, under created(), I am calling a vuex action (defined in a store module) to query the firestore db and bind a certain subset of the objects in the collection to vuex, restricted programmatically. Summing up:
Let me simplify my question. Here is my structure:
<template> has a v-for list feeded by the computed() property below.
mounted () a function calling vuexfire action binding db RESTRICTED collection to state.ref
computed () some c. property returning a list of state.ref
methods () some method callong vuexfire action binding db UN***RESTRICTED collection relative to some WHERE TO parameter to state.ref
I want to be able to call the method sometimes to reset state.ref to the UNRESTRICTED set of db objects.
My problem is that calling the method triggers no error, but seems to fail: the computed() list returns no object.
Related
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 using Inertiajs
with Laravel and also trying to use Element UI components but as i use Menu component i am having following error in console, I just used example as given in Element Ui Components as i was testing.
I see 2 different errors in there, both of them are with props.
I assume your component is taking the route as a prop, and you are also using the route as a method, which you might have put inside methods: {} which is not allowed. Make sure you rename your method route to something else.
Note: As a matter of fact you can't have any data coinciding with each other. your props, data, computed props and methods all should have unique names.
You are trying to use v-model on the props directly which won't work in Vue. if the prop is a primitive (Number, String, Boolean etc). but you can pass Object or an Array which can hold a reference to the data. This is because reactivity in Vue can't keep track of props when passed as primitives.
More on prop mutations here: https://v2.vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow
I am experimenting with Vue and VueX and while everything is working well, there is one aspect that is troubling with regards to the store mechanism.
I have a component that loads a set of data from a remote service via axios. It works correctly and is called when the component is created.
export default {
created() {
this.$store.dispatch('foo/getBar');
}
...
}
This correctly populates the "bar" variable in the component with the valeus returned from the api call.
When I next view the component in the application, the created function is called again and the api called again, which returns the same data.
What is the best practice way of avoiding subsequent calls until we know that there is different data to be collected? Or more precisely, how do I invalidate data in the store when necessary so that api call is made only when it needs it?
You can put your api call to the parent or root component then place a refresh button to the child component.
Or you can check if variable bar is empty then make the api call.
This is a vue/vuex app and we have an object: myObject, that has a set of children: myObject.kids.
.kids is not loaded when the object is initially loaded by vuex.
Now I want to create a component that works on .kids.
What is the vue/vuex approach to this situation?
Should I create a root-level set to hold the kids or is there a way to load them (via ajax) into the myObject already in the store?
You can do whatever you want, load it vie ajax, create the property if it doesn't exist on component load, etc. The most important part is creating a reactive property, however. I would recommend the following:
this.$store.commit('SET_KIDS', payload)
Which would translate to a mutation in your store receiving a payload:
Vue.set(state.myObject, 'kids', payload)
This is important because the property needs to be reactive in order to be observable and for the store to record changes to the property.
Assuming that I have this component below:
<c-attachs v-for="item in attachs" v-bind:path="item.path"></c-attachs>
And try to edit some property directly from some method, such as:
methods: {
changeProp: function ()
{
this.path = 'myNewString';
}
}
Vuejs warns on the console with the message:
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders
But... if I set "v-bind:allprops="item" and edit property directly through "allprops" object (such as code below), it works fine without error. My doubt is... Is this the correct way to edit property on events without using v-model?
this.allprops.path = 'myNewString';
There is no correct way to edit props, because you are not supposed to edit them.
Every component should have complete control over its own data. That keeps behavior easy to reason about. Items that are passed to children as props should be considered read-only, so that the owner of those items retains control. That is why Vue has events.
When something happens in a component that should affect data that the component doesn't own, the component should issue an event so that the owner of the data item can handle it. If the owner of the data item changes its value, that change will flow down through the props.