更新Vuex中的状态?

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.

但是我很难弄清楚我将如何做。

Please check this complete working Example.

这是我的Vuex商店:

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;
    }
  }

这是我的用户组件:

<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>

这是我的EditMode组件:

<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>

谢谢您的帮助。谢谢。

评论
x呆子x
x呆子x

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.

点赞
评论