Ways to rerun a Vuex Getter

Question

Ways to rerun a Vuex Getter

Perhaps there's a misunderstanding on my part regarding the concept of a getter in Vuex. Let's consider a scenario where I have a getter that fetches the size of a DOM element, such as a div. The code would look something like this:

const getters = {
  getContainerWidth (state) {
    return document.getElementById('main-content').clientWidth;
  }
}

Upon starting my application, all the getters are executed immediately. But what if the div is not available during startup? How can I re-run a getter?

Currently, I run the getter like this:

import store from '@/store'
store.getters['myModule/getContainerWidth']

I had a thought that maybe doing this would work:

store.getters['myModule/getContainerWidth']()

However, since store.getters is an object with properties and values that are not functions, it seems that I cannot re-run them.

Any suggestions or ideas?

javascript vue.js vuex

Answer 1

Answer №1

It is important for getters to rely on the state field in order to be reactive. If you are trying to monitor changes in the clientWidth, it will not function properly.

If you wish to utilize it as a function, simply return a function from the getter:

const getters = {
  getContainerWidth (state) {
    return () => {
       let container = document.getElementById('main-content');
       return container ? container.clientWidth : 0
    };
 }

}

You can then use it by calling getContainerWidth()

Answer 2

It is important for getters to rely on the state field in order to be reactive. If you are trying to monitor changes in the clientWidth, it will not function properly.

If you wish to utilize it as a function, simply return a function from the getter:

const getters = {
  getContainerWidth (state) {
    return () => {
       let container = document.getElementById('main-content');
       return container ? container.clientWidth : 0
    };
 }

}

You can then use it by calling getContainerWidth()

Ways to rerun a Vuex Getter

Answer №1

Similar questions

What is the method for creating a loop in Angular?

An error handling event for XHTML compliance, similar to the HTML onerror event, is designed to address the issue of

Changing the .load function based on user input

What is the best way to exclude a field from a Joi schema?

Adjusting the scope value directly within a directive

JQuery .click Event doesn't center elements even with transform-origin adjustment

JavaScript: iterating over an array of objects containing nested arrays

Loading HTML content in a WPF WebBrowser without encountering security messages

The perfect method for creating template literals using a function

Modifying the CSS design of specific columns within a table created using JavaScript

The component in vue.js does not recognize "action" as a valid method

Issues have been encountered with the functionality of $rootScope

Is it possible to manipulate an Object within Object typescript?

A guide on utilizing getStaticProps to map a collection obtained from Strapi within a Next.js component

Is it possible to animate share buttons using Framer Motion but staggering siblings?

Unusual layout in Next.js editor (VS Code)

Tips for updating the First object based on certain matching values from the Second object using JavaScript

Adding information to an Excel spreadsheet using JavaScript

How can I dynamically resize a Bubble using CSV data based on the radius specified in a JSON file when a button is clicked?

Executing two asynchronous functions successfully