在 Vuex 中更新 State？

Question

我正在嘗試創建一個用戶配置文件表單，您可以在其中編輯用戶的信息，例如姓名和年齡。 我設置了 2 條路由，用於主用戶組件的/和通向用戶 Edit 組件的/edit 。 我有一個user state，我在我的User組件中循環到 output 用戶的name和age 。 我在我的User組件中添加了一個名為enterEditMode的方法，單擊該方法會獲取所選用戶的name和age屬性，然后將其輸出到我的EditMode組件中的表單中。 我正在嘗試創建一種方法， onClick將更新用戶的姓名或年齡。 所以我想點擊 Sam，在下一頁上，將他的名字更新為Samuel ，然后點擊Update Info按鈕，這應該在我的User組件頁面上將Sam的名字更新為Samuel 。

但我很難弄清楚我將如何做到這一點。

請檢查這個完整的工作示例。

這是我的 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>

謝謝大家的幫助。 謝謝你。

Answer 1

您需要在商店中創建一個突變來更新user列表。 例如更新選定的用戶名：

創建一個updateUserName突變，並確保payload包含要更新的用戶索引和名稱：

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

然后在EditMode.vue文件中，讓計算名稱的 set 方法提交我們剛剛創建的updateUserName突變，記住要同時傳入 index 和 name 屬性：

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

為了方便起見，這里的index是從路由參數中獲取的另一個計算屬性：

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

檢查CodeSandbox 工作示例。