Is it possible to have a getter in vuex dynamically update when another getter's value changes?

Question

Is it possible to have a getter in vuex dynamically update when another getter's value changes?

Within my vuex store, I have this getter that retrieves authority_count:

authority_count (state, getters) {
      return getters.dataView?.getUint16(4, true) || state.pack.authority_count;
}

I want authority_count to default to state.pack.authority_count when dataView is null. However, once a file is loaded on the page, I want authority_count to be recalculated after the loading process is complete and dataView is populated with the file's data. How can I achieve this functionality?

The issue arises when I ensure getters.dataView returns a DataView object, as authority_count still defaults to state.pack.authority_count.

I am using a file input to extract binary data from files and load it into an arrayBuffer accessed by the dataView getter.

Link to loading arrayBuffer code

Link to loading dataView code

Logs related to authority_count:

[HMR] Waiting for update signal from WDS...
getters.dataView:  null
state.pack.authority_count:  5

javascript vue.js vuejs2 vuex getter

Answer 1

Answer №1

Identified are two key issues within the project provided:

Any alterations to the Vuex state, such as arrayBuffer, should be exclusively carried out within a Vuex mutation:

mutations: {
  setArrayBuffer(state, payload) {
    state.arrayBuffer = payload;
  }
},

In order to invoke this mutation, use the following snippet:

reader.onload = (event) => {
  this.$store.commit('setArrayBuffer', event.target.result);
}

The component's arrayBuffer ought to be computed in order to maintain synchronization with Vuex:

data () {
  return {
    pack: this.$store.state.pack
  }
},
computed: {
  arrayBuffer() { // Alternatively, you can utilize `mapState` for the same functionality
    return this.$store.state.arrayBuffer
  },
  buffer () {
    return [...new Uint8Array(this.arrayBuffer)]
      .map (b => b.toString(16).toUpperCase().padStart(2, '0'));
  }
},

If you desire similar synchronization for pack, you will need to implement the same approach.

Answer 2

Identified are two key issues within the project provided:

Any alterations to the Vuex state, such as arrayBuffer, should be exclusively carried out within a Vuex mutation:

mutations: {
  setArrayBuffer(state, payload) {
    state.arrayBuffer = payload;
  }
},

In order to invoke this mutation, use the following snippet:

reader.onload = (event) => {
  this.$store.commit('setArrayBuffer', event.target.result);
}

The component's arrayBuffer ought to be computed in order to maintain synchronization with Vuex:

data () {
  return {
    pack: this.$store.state.pack
  }
},
computed: {
  arrayBuffer() { // Alternatively, you can utilize `mapState` for the same functionality
    return this.$store.state.arrayBuffer
  },
  buffer () {
    return [...new Uint8Array(this.arrayBuffer)]
      .map (b => b.toString(16).toUpperCase().padStart(2, '0'));
  }
},

If you desire similar synchronization for pack, you will need to implement the same approach.

Is it possible to have a getter in vuex dynamically update when another getter's value changes?

Answer №1

Similar questions

I'm looking for a method to dynamically update my component without the need to refresh the entire page. Can

Ways to adjust the position of a DIV based on its index value

Retrieving multiple lines of text from the database and populating a TextArea

Guide on uploading files using Vue.js2 and Laravel 5.4

What is the best way to invoke a function from one controller in angularjs to another controller?

Discovering the generic type from an optional parameter within a constructor

Issue encountered while attempting to host an ejs file using Express in Node.js

How to use jQuery to target the second or any desired div element with a specific class

Improprove the efficiency of flattening an array containing nested JSON objects using JavaScript

Is a 'Virtual DOM' included in React Native's architecture?

The issue lies in the error code TS2315 which states that the type 'observable' is not a generic

Creating a server that is exclusive to the application in Node.js/npm or altering the response body of outgoing requests

view multiple HTML documents simultaneously in a single browser tab

Performing subtraction on two arrays in Javascript

Struggling to achieve success in redirecting with passport for Facebook

Is it feasible to access reference images contained within a zip/tar file using html/javascript with the help of a library?

When utilizing scoped slots in BootstrapVue, you may encounter an error stating "Property or method 'data' is not defined."

What is the best way to display the HTML content being received from the database in the DOM?

Why is my Vue/MySQL Database not showing up online, even though it is accessible locally?

Sending a file from a VueJS application to a Laravel API