Update State in Vuex?

Question

I am trying to create a user Profile form where you can edit user's information such as name and age. I have 2 routes set up, the /which is for the main user component and the /edit which leads to the user Edit component. I have a user state that i am looping over to output name and age for a user in my User Component. I have added a method in my User component named enterEditMode which on click fetches name and age property of the user selected and then outputs that into the form in my EditMode Component. I am trying to create a method which onClick would update the name or age of the user. So i'd like to click on Sam and on the next page, update his name to Samuel and then click on Update Info button which should update the name Sam to Samuel on my User component page.

But i am having a hard time figuring out how i will do it.

Please check this complete working Example.

This is my Vuex Store:-

state: {
    user: [{ name: "Max", age: 29 }, { name: "Sam", age: 28 }],
    name: "",
    age: null
  },
  getters: {
    getUser: state => state.user,
    getName: state => state.user.name,
    getAge: state => state.user.age
  },
  mutations: {
    setName(state, payload) {
      state.name = payload;
    },
    setAge(state, payload) {
      state.age = payload;
    }
  }

This is my User Component:-

<template>
  <v-container>
    <v-flex v-for="(user,index) in getUser" :key="index">
      {{ user.name }} {{user.age}}
      <v-icon @click="enterEditMode(index)">create</v-icon>
    </v-flex>
  </v-container>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
export default {
  name: "User",
  computed: {
    ...mapGetters({
      getUser: "getUser"
    })
  },
  methods: {
    ...mapMutations({
      setName: "setName",
      setAge: "setAge"
    }),
    enterEditMode(index) {
      this.setName(this.getUser[index].name);
      this.setAge(this.getUser[index].age);
      this.$router.push({ name: "EditMode", params: { index: index } });
    }
  }
};
</script>

This is my EditMode Component:-

<template>
  <v-card>
    <v-text-field solo v-model="name"></v-text-field>
    <v-text-field solo v-model="age"></v-text-field>
    <v-btn>Update Info</v-btn>
  </v-card>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters({
      getName: "getName",
      getAge: "getAge"
    }),
    name: {
    get() {
      return this.getName;
    },
    set(val) {
      return this.$store.commit("setName", val);
    }
  },
  age: {
    get() {
      return this.getAge;
    },
    set(val) {
      return this.$store.commit("setAge", val);
    }
  }
  },
  methods: {
    updateInfo() {
      this.$router.push('/')
    }
  }
};
</script>

Thank you for all the help guys. Thank you.

Answer 1

You need to create a mutation in the store to update the user list. For instance to update the selected user name:

Create a updateUserName mutation, and make sure the payload contains both the user index and name to be updated:

mutations: {
  updateUserName(state, payload) {
    state.user[payload.index].name = payload.name;
  }
}

And then in the EditMode.vue file, let the set method of computed name to commit the updateUserName mutation we just created, keep in mind to pass in both the index and name properties:

name: {
  get() {
    return this.getName;
  },
  set(val) {
    return this.$store.commit("updateUserName", {
      name: val,
      index: this.index
    });
  }
}

Here index is another computed property taken from the route parameters for convenience:

index() {
  return this.$route.params.index;
},

Check the CodeSandbox working example.