Is it more efficient to use Vue events or Vuex for transmitting data between components?

Working on a project where data needs to be shared between components in order to update a canvas element at 30-60fps for optimal performance on low-end devices.

Currently utilizing Vuex store/get method for data transfer, but considering using events as an alternative approach. Seeking information on the performance impact of Vuex before making any major code changes.

Seeking advice on whether to continue with Vuex or switch to event-based data passing. Using getters from an ES6 module for reference.

Answer №1

Is your application large?

I tend to steer clear of using Vuex unless absolutely necessary. The issue with Vuex is that as your Store grows in size, it becomes a bulky Object that is constantly loaded on every page, subpage, and Component, consuming memory in the Browser.

One workaround is to utilize Subscribe and Unsubscribe Vuex methods to dynamically add and remove Vuex modules, using them only when needed. However, they still contribute to the overall "global" nature of the Object.

If you find yourself needing to use Vuex, strive to keep it as streamlined as possible. Avoid putting everything into it.

While I haven't personally tested this, I believe that utilizing props and $emits may perform faster than relying on mutations and getters.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Ajax to dynamically generate unique ID's for multiple checkboxes

I have been working on a website that is almost completed, however, I have come across a new task where I need to select check-boxes in order to archive news items or "blog posts". The concept is to have a check-box next to each blog post and by checking ...

javascript php jquery ajax checkbox

Intellisense in VS Code is failing to provide assistance for data within Vue single file components

I am working with a simple code snippet like this However, within the method, the variable 'name' is being recognized as type any. Interestingly, when I hover over 'name' in the data, it shows up as a string. The Vetur plugin has alre ...

typescript vue.js visual-studio-code

Skipping code in JavaScript/jQuery function on window load

I have created a function that applies specific CSS rules to elements when the window is fully loaded. Check out my code below: function applyHover() { $('.view_preloader .overlay').css('opacity',1); $('.view_pre ...

javascript jquery

Tips for capturing all mobile events in Angular

Trying to capture all mobile events like touch and swipe, I have added event listeners at the document level: document.addEventListener('tap', trackTouchActivity, false); document.addEventListener('swipe', trackTouchActivity, false ...

javascript angularjs mobile

Error message from Angular development server: Channel is reporting an error in handling the response. The UNK/SW_UNREACHABLE options

After recently installing a new Angular app, I encountered an issue while running 'ng serve'. The application initially loads without any problems, but after a few seconds, I started seeing a strange error in the console. Channel: Error in handle ...

javascript angular

Using Backbone.js to Retrieve Data from the Server and Bind it to a Model

Having recently delved into Backbone.js, I found this informative tutorial quite helpful in getting started. Now, I am looking to take things a step further by fetching data from the server instead of hardcoding values in JavaScript as demonstrated in the ...

javascript jquery asp.net-mvc asp.net-mvc-3 backbone.js

What is the reason for using 'app' as the top-level directory name in React Native import statements within a project setting?

Seeking to comprehend the imports within React Native source code, specifically in a file named questionnaire.actions.js, relative to the top-level directory called lucy-app: ./src/containers/newUserOnboarding/questionnaire/questionnaire.actions.js The m ...

javascript reactjs react-native

Using Javascript to add hovering effects that demonstrate sophistication and style

I have a question : Here is the HTML code snippet: <div class="a b"> <span class="one">Success ONE</span> <span class="two">ONE</span> </div> <div class="a b"> <span class="one">Success TWO< ...

javascript jquery html css

How to ensure that the iframe is completely loaded before proceeding with Selenium JavaScript

I have a webpage that displays an iframe, within the iframe there is a spinning spinner (overlying the fields). My approach involves using selenium to navigate to the iframe, return this.driver.wait(function() { return self.webdriver.until.ableToSw ...

javascript selenium

Retrieve DirectionsResult data from a Google Maps URL

Currently, I am developing an updated tool that can transform Google Maps directions into GPX files. The initial version of this tool is performing quite well: it utilizes the Google Maps Javascript API (v3) to showcase a map on the website, allowing users ...

javascript google-maps google-maps-api-3

Implement a mouseenter event to all input elements that have specific names stored in an array, utilizing jQuery

I'm struggling to figure out how to apply my function to all input elements with a name that is included in my array. This is what I've attempted so far: var names = ["name1", "name2"]; $(document).ready(function(){ $('input[name=names[ ...

javascript jquery input jquery-selectors

End the HTML page once the Flash (SWF) animation comes to a close

I have successfully exported my flash file to an HTML page. How can I make the page close automatically once the flash animation is finished? While I can use actionscript to stop the animation, I need the entire page to shut down on its own. I attempted u ...

javascript html actionscript-3 flash

One way to concatenate texts in an array of dictionaries while keeping the order intact in JS/React is to compare and match specific key-value pairs

My dataset looks something like this: Record= [ { "tid":1, token_text": "Canis", "spanid": 1, "label": "Name" }, { "tid":2, "token_text": "Familiaris", "spanid": ...

javascript reactjs arrays string dictionary

I'm having trouble understanding why my data does not appear even though there is space allocated for it automatically

I'm facing an issue with my code that is supposed to populate a table with dynamic content using react and ant.design. Everything seems to be working fine, but the actual content is not displaying - only the space for it is created. What's happe ...

javascript reactjs antd

Tips for retrieving the posted object in angularJS

My current challenge involves creating an object with a defined name, posting it into a database, and then immediately finding its position and obtaining its id. However, I have noticed that using "get" right after "post" retrieves the data before it' ...

javascript angularjs rest activiti

A guide on automating the html5 color picker using input type="color" in selenium webdriver

When interacting with an HTML color input element, a color picker window pops up that prevents viewing the DOM. I am looking for a solution to either select a color and close the window or enter a hex code in the popup's text box. Can anyone provide m ...

javascript html selenium automation

JavaScripter Q&A