CODEWITHSUNDEEP
javascriptvue.jsvuexvue-router
Ludo237
Ludo237

Reputation: 1717

Local component data change Vuex state when it shouldn't

I've a component called EditUser.vue which is linked to a router system using vue router, this is the definition of the route for this component

{
 path: "/users/:id/edit",
 name: "Edit User",
 props: true,
 component: () => import(/* webpackChunkName "edit-user" */ "@/views/EditUser.vue"),
 beforeEnter: (to, from, next) => {
   if (!store.getters.isLogged) next("/");
   else next();
 }
},

Pretty straightforward with props enable because it needs to get the user id.

The component itself is this

<template>
<main class="h-creen p-3">

      <Input
        type="text"
        name="name"
        label="name"
        v-model="user.name"
        required
      />
</main>
</template>

<script>
import { mapState } from "vuex";
import Input from "@/components/Input.vue";

export default {
  name: "EditUserView",

  props: {
    id: {
      required: true,
      type: String,
    }
  },

  components: {
   Input,
  },

  data: () => ({
    user: {},
   }),

  async beforeMount() {
    // TODO move into router file
    if (this.users.length <= 0) {
      this.$router.push("/users");
    }

    this.user = this.users.find(user => user.id == this.id);
  },

  computed: mapState(["users"])
  };
</script>

I've omitted the useless parts, this code replicate the problem anyway. <Input> is just a wrapper for a label and an input with some styling, nothing magic there.

The problems is that if I type something into the input I expect that this.users gets modified, which it happens, but it should not modified the same record inside the Vuex state, but that happens and I don't get why. In other words if I edit the name using the input, this modification gets propagated on the state, thus being rendered in other views, but it shouldn't since it's a local data.

What am I missing here?

Upvotes: 2

Views: 265

Answers (1)

Estus Flask
Estus Flask

Reputation: 222309

This results in assigning with a reference to existing object:

this.user = this.users.find(user => user.id == this.id);

When user.name property is changed with v-model two-way binding, the respective nested object is modified in users.

Data should be either shallowly copied to be local (deep copy may be necessary depending on the case):

this.user = {...this.users.find(user => user.id == this.id)};

Then this.user should be copied back to this.users when needed.

Or the component shouldn't have its own user, it can contain separate fields:

  <Input
    type="text"
    name="name"
    label="name"
    v-model="name"
    required
  />

name, etc. can be copied back to this.users when needed.

Upvotes: 2

Related Questions