Observing an array being stored in Vuex within a VueJS application

Question

Observing an array being stored in Vuex within a VueJS application

I currently have a list of customers stored as an array of objects in Vuex. When rendering this list in my component, each row includes a checkbox using Keen-UI:

<tr v-for="customer in customers" :class="{ selected: customer.selected }">
    <td>
      <ui-checkbox :value.sync="customer.selected"></ui-checkbox>
    </td>
    <td>{{ customer.name }}</td>
    <td>{{ customer.email }}</td>
</tr>

However, the checkbox directly modifies the customers array, which is causing issues because I am using strict mode in Vuex and it throws an error.

I need to track changes made to the array and then call an action to update the Vuex state accordingly:

watch: {
 'customers': {
  handler() {
    // ...
  },

  deep: true
}

Even with this setup, the customer object is still being changed directly. How can I go about resolving this issue?

javascript arrays vue.js vuex

Answer 1

Answer №1

Before anything else, exercise caution when utilizing the .sync feature as it is set to be phased out in version 2.0.

Refer to this resource: http://vuex.vuejs.org/en/forms.html, as it addresses the issue at hand. Essentially, this checkbox should initiate a vuex action upon input or change events. As outlined in the documentation:

<input :value="message" @input="updateMessage">

The function updateMessage appears as follows:

vuex: {
  getters: {
    message: state => state.obj.message
  },
  actions: {
    updateMessage: ({ dispatch }, e) => {
      dispatch('UPDATE_MESSAGE', e.target.value)
    }
  }
}

If you prefer not to monitor the mutations, you have the option to shift the state of this component away from vuex, enabling the full utilization of v-model.

Answer 2

Before anything else, exercise caution when utilizing the .sync feature as it is set to be phased out in version 2.0.

Refer to this resource: http://vuex.vuejs.org/en/forms.html, as it addresses the issue at hand. Essentially, this checkbox should initiate a vuex action upon input or change events. As outlined in the documentation:

<input :value="message" @input="updateMessage">

The function updateMessage appears as follows:

vuex: {
  getters: {
    message: state => state.obj.message
  },
  actions: {
    updateMessage: ({ dispatch }, e) => {
      dispatch('UPDATE_MESSAGE', e.target.value)
    }
  }
}

If you prefer not to monitor the mutations, you have the option to shift the state of this component away from vuex, enabling the full utilization of v-model.

Answer 3

Answer №2

To implement a custom getter and setter, follow these steps:

<template>
    <ui-checkbox :value.sync="thisCustomer"></ui-checkbox>
</template>

<script>
    //Using Vuex 2.0 syntax
    export default {
        thisCustomer: {
            get() {
                return this.$store.state.customer;
            },
            set(val) {
                this.$store.commit('SET_CUSTOMER', val);
                // Alternatively, you can use an action:
                  // this.$store.disptach('updateCustomer')
            }
       },
   }
</script>

In your store file:

import {
    SET_CUSTOMER,
} from '../mutation-types';

const state = {
    customer: null,
};

const mutations = {
    [SET_CUSTOMER](state, value) {
        state.customer = value;
    },
}

This example may need adjustments based on your specific store setup, but it should help guide you in the right direction :)

Answer 4

To implement a custom getter and setter, follow these steps:

<template>
    <ui-checkbox :value.sync="thisCustomer"></ui-checkbox>
</template>

<script>
    //Using Vuex 2.0 syntax
    export default {
        thisCustomer: {
            get() {
                return this.$store.state.customer;
            },
            set(val) {
                this.$store.commit('SET_CUSTOMER', val);
                // Alternatively, you can use an action:
                  // this.$store.disptach('updateCustomer')
            }
       },
   }
</script>

In your store file:

import {
    SET_CUSTOMER,
} from '../mutation-types';

const state = {
    customer: null,
};

const mutations = {
    [SET_CUSTOMER](state, value) {
        state.customer = value;
    },
}

This example may need adjustments based on your specific store setup, but it should help guide you in the right direction :)

Answer 5

Answer №3

When your clients are in the main state, you might want to attempt the following approach:

watch: {
 '$store.state.clients'{
   handler() {
    // ...
   },

   deep: true
 }
}

Answer 6

When your clients are in the main state, you might want to attempt the following approach:

watch: {
 '$store.state.clients'{
   handler() {
    // ...
   },

   deep: true
 }
}

Answer 7

Answer №4

experiment with mapState within your component and observe how it affects the customers, similar to what you demonstrated earlier. It made a difference for me.

Answer 8

experiment with mapState within your component and observe how it affects the customers, similar to what you demonstrated earlier. It made a difference for me.

Observing an array being stored in Vuex within a VueJS application

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Error in parsing JSON: An unexpected token < was encountered at the beginning of the JSON input, causing a SyntaxError at position 0 when parsing with

Tips for creating a responsive image using Material-UI

Substitute link with asynchronous JavaScript and XML

Bootstrapvalidator does not function properly with select2.js

PhpStorm alerts users to potential issues with Object methods within Vue components when TypeScript is being utilized

Developing an interactive graph with Django and harnessing the power of chart.js

Tips for avoiding unnecessary re-renders

What causes the other array to be affected when one is changed?

Unable to use href attribute as intended

What is the best way to implement promise function in a JavaScript functional method such as forEach or reduce?

How can Symfony 2 and PHP be used to compare differences between objects within arrays?

Exploring the concept of JavaScript nested promise scopes within the context of AngularJS

Bug with FullPage scrollOverflow sections when scrolling with iScroll's scrollTo() function

Retrieving Results from Sequenced Promises

Creating a game of Black Jack using a prebuilt deck class

Sending a POST request using Axios to the 'appName/v1/users/' route (using Djoser) results in a 401 error, whereas Postman does not encounter this issue

Save a text as a CSV file while also preserving any commas within the

Having difficulty creating JSON data following retrieval of rows by alias in MySQL

Encountering unexpected props in Components upon clicking links within React-router

Having trouble with my initialData in react-query - any suggestions on how to fix it?