I have particular state object which consist of state object which looks like this.
{
cards:[
{
id:'card01',
title:"My card 01",
category:[
{
id:1,
name:'cat1',
tags:[{id:11,name:'tag1'}]
},
{
id:2,
name:'cat2',
tags:[{id:11,name:'tag1'}]
}
]
},
{
id:'card01',
title:"My card 02",
category:[
{
id:11,
name:'cat11',
tags:[{id:111,name:'tag11'}]
},
{
id:22,
name:'cat22',
tags:[{id:111,name:'tag22'}]
}
]
}
]
}
This particular object is fetched from the backend and it is kept in the store. I need to filter out the categories when ever the user selects a card (when a card is selected it returns of gets the card id). and i need to display the category in a different component with the tags inside the category. Do i need to use reselect for this is there any advantage of using it?. I need to to do this filtration on the data in my store.
Related
I have been trying to change the language from English to others,
$t('bascketball')
↑this works inside the template, however I am looking the way that I can change the language of elements inside of export Default.
If you know how to solve it, please advice me.
export default {
name: "Home",
components: {},
data() {
return {
Games: [
keyword: '',
games: [
{
heading: $t('Basketball'),
text:
"Hello Basketball players, want to know about team members. Click Below.",
img:
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQt0Sh97iYcu0kTguhcsW_szWfzolqu1ynGeQ&usqp=CAU",
},
You can do it with one of these:
this.$t('Basketball')
this.$i18n.tc('Basketball')
But because you're calling the API, you cannot do it in data, you can rewrite it to a computed method, like that:
computed: {
games() {
return [
{
heading: this.$t('Basketball'),
text:
"Hello Basketball players, want to know about team members. Click Below.",
img:
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQt0Sh97iYcu0kTguhcsW_szWfzolqu1ynGeQ&usqp=CAU",
}
]
}
}
I have a base component within which I have a dynamic component with a v-for that displays based on a computed property.
All I've really tried doing thus far, which was an incorrect methodology, was to wrap the method that loads data in a settimeout. This question is as much a methodology question as it is a coding question.
My base component looks like this:
<template>
<div>
<v-progress-linear
v-model="progressValue"
v-if="loading"
></v-progress-linear>
<component
v-for="table in tables"
:key="table.id"
:is="table.structure"
:table="table"
></component>
</div>
</template>
<script>
import Annual from './DataTables/Annual';
import { mapState, mapGetters } from 'vuex';
export default {
name: "Page",
props: [],
components: {
Annual,
},
data: () => ({
progressValue: 0,
loading: false,
tables: [],
}),
computed: {
...mapGetters({
currentTables: 'getCurrentPageTables',
tableTitles: 'getCurrentPageTableTitles',
}),
...mapState({
pageName: state => state.pageName,
snakeName: state => state.snakeName,
}),
methods: {
updateTables(payload) {
this.loading = true;
payload.forEach(title => {
this.tables.push(this.currentTables.filter(e => title === e.name)[0]);
this.progressValue = this.tables.length / payload.length;
})
},
},
watch: {
snakeName: {
handler() {
this.progressValue = 0;
this.updateTables(this.tableTitles);
this.$nextTick(() => {this.loading = false;})
},
immediate: true,
},
}
}
</script>
Annual.vue is simply a component that displays a Vuetify v-data-table element and its structure is fairly inconsequential to this.
For all intents and purposes we can consider currentTables and tableTitles to both be arrays, the first of objects whose data populate the v-data-tables in Annual.vue, and the second of strings which are just the names of the tables.
When the user navigates to another page the getters return different data, based on the page the user navigates to, but some of the pages have over 20 tables, which makes page loading slow upon navigation to these pages. I am trying to do one of two things:
1. Asynchronously load the components one at a time while still making the page functional for the user to navigate through.
2. Display a loader that disappears after all of the content is rendered. I'm having trouble figuring out how to do the latter because I can't put this functionality into the mounted() hook since all of this happens upon the watched parameter changing (hence the component is not re-mounted each time the route changes).
Any advice on how to tackle this would be appreciated.
I am trying to create a customizable Qt3D component by merging three ConeMeshes into a single entity. The user must be able to interact with the custom entity, so I have added an ObjectPicker to the file. Normally, I would use a predefined scaled .obj file, but my manager wants the objects to be drawn directly by Qt.
The two meshes I want to combine are defined in a seperate qml file, so I can call it within my Scene3D.
Entity {
ObjectPicker {
id: combinedPicker
}
ConeMesh {
id: conemesh1
...
}
ConeMesh {
id: conemesh2
...
}
Transform {
id: conetransform1
}
Transform {
id: conetransform2
}
Entity {
components: [conemesh1, conetransform1, conemesh2, conetransform2, combinedPicker]
}
}
My approach for putting the meshes together is to enclose them as components in a separate Entity scope, as shown in the last line. But this approach only renders the last entry in the components array. Above, that would be conemesh2.
Previously I tried to create multiple Entity instances, and pass each one the id of the ObjectPicker,
Entity {
components: [conemesh1, conetransform1, combinedPicker]
}
Entity {
components: [conemesh2, conetransform2, combinedPicker]
}
But as per the documentation of ObjectPicker, the object picker is not meant to be shared by multiple components.
So my question is this: What is the correct approach when merging multiple meshes into one single mesh in Qml?
I solved the problem by "factoring" out the ObjectPicker element, effectivly making it a sibling of the mesh entities.
Entity {
components:
[conePicker]
Entity {
id: pipeTopEntity
components: [coneMeshTop, coneTransformTop, floorMaterialTop]
}
Entity {
id: pipeBodyEntity
components: [coneMeshBody, coneTransformBody, floorMaterialBody]
}
Entity {
id: pipeBotEntity
components: [ coneMeshBot, coneTransformBot, floorMaterialBot]
}
}
How to build a Redux selector for collection with global and local derived data?
I have some data that looks like:
{
palette: [1,0,1,1],
children: [
{
RootData: [...],
},
//more children...
]
}
There are some computed derived properties I need to add. DerivedRoot and ComputedFromPaletteAndDerivedRoot
{
palette: [1,0,1,1],
children: [
{
RootData: [...],
// Local data for this child derived from the RootData
DerivedRoot: [],
// Additional data derived from global `palette` and local `RootData`
ComputedFromPaletteAndDerivedRoot: []
},
//more children...
]
}
I've looked at reselect and I'm not sure if it's the right tool to utilize in this scenario.
Individual children's RootData values can change and I don't want the selector applied to the full children collection as that would re-memoize all the children anytime an individual child changes. Additionally any time palette changes the child selectors could recompute a new value for ComputedFromPaletteAndDerivedRoot
I have an app which is very similar to instagram, but instead of having one main feed, the user
can have multiple feeds based on the events he/she attends. I'm using redux for the state management
and currently I have these reducers:
feed
people
schedule
user
navigation
My feed reducer looks like:
{
allEvents: [],
event: {
id: 123,
name: 'Foo'
},
items: [
{
id: 23,
imageUrl: 'http://img.com/foo',
likes: [{ id: 1, user: {...} }, { id: 2, user: {...} }],
comments: [{ id: 1, text: '...', user: {...} }, { id: 2, text: '...', user: {...} }]
}
]
}
So my state structure currently looks like:
{
feed,
people,
schedule,
user,
navigation
}
But at the moment every time the user changes current event the whole feed state is replaced by a
new state for that particular event, so if the user comes back to the previous event the whole feed needs
to be fetched again, same is with people reducer and schedule, which depends on the event.
Also user has it's own profile feed which shows user's feed items. And in order to have this feed I would
need to duplicate what I have in the current feed reducer, so I thought it would be better to have multiple feeds,
inside event reducer.
I was wondering if the state structure like this wouldn't be better:
{
events: {
items: [
feed,
people,
schedule
]
}
user,
navigation
}
Then I read redux#815 or redux#994 that it's not the best way to nest reducers.
Should it look more or less like:
{
feed: {
feedIds: [23, 24, 25],
byId: {
23: {
items: [123, 124, 125]
}
}
},
items: {
itemsIds: [123, 124, 125, 126, 127],
byId: {
124: {
id: 124,
image: 'http://img.com ',
likes: [1, 2, 3]
}
}
},
likes: {
likesIds: []
},
events: {
eventIds: [1, 2, 3],
byId: {
1: {
id: 1,
name: 'TYW Croatia w34'
feedId: 23,
peopleId: 12,
scheduleId: 1
}
}
},
people: {...}
}
What's the best practice in this case and which way is the most performant?
A normalized structure, like your last example, is definitely both a best practice and more performant. The state is flatter, so updates are more targeted and affect fewer unrelated objects; items can be easily looked up by ID as needed; and the update logic will generally be simpler. Also, this allows you to pass item IDs to connected child components, which then look up their own data based on that ID, and they will only need to re-render when their own data changes. Finally, it works well for caching data.
You might want to read through some of these articles on Redux performance for more information, particularly High Performance Redux. You may also want to read some of the discussion at Normalising state and garbage collection.
edit:
As a follow-up, I recently added a new section to the Redux docs, on the topic of "Structuring Reducers". In particular, this section includes chapters on "Normalizing State Shape" and "Updating Normalized Data".