Vue Js 我應該為此使用 Vuex 嗎？

Question

我正在參加學習 Vuejs 的小型研討會。 我有 2 個組件； PersonCard 和 ColorPick 以及一組數據。 我可以為人物數據中的每個人創建一個新的人物卡片，並且在每個人物卡片中我可以創建一個顏色選擇器（單選按鈕），但我很難過如何將“選擇的顏色”返回到人物卡片的呈現位置用作樣式綁定？ 我一直在嘗試使用 $emit 但它不起作用。 任何建議將受到歡迎。

我很確定我無法抓取和設置 updatedPlayers.color 因為 updatedPlayers 是一個在模板中迭代的數組，但是我如何定位 updatedPlayers 中的特定“玩家”以根據 $emit 更新他們的顏色？

應用程序

    <template>
  <div>
    <PersonCard :players="players"></PersonCard>
  </div>
</template>

<script>

import PersonCard from './components/PersonCard.vue'

  export default {
    components: {
      PersonCard
    },
    data () {
      return {
        players: [
        {
        id: 1,
        name: "Daniel",
        age: 33,
        color:"red"
        },
        {
        id: 2,
        name: "Sam",
        age: 21,
        color: "green"
        }
        ]
      }
    }

  };
</script>

<style scoped>

</style>

名片.vue

<template>
  <div>
      <li  v-for="player in updatedPlayers" :key="player.id">
          <h4 :style="{backgroundColor: player.color}">{{player.name}}</h4>
          <ColorPick @colorChosen="newColor"></ColorPick>
      </li>
  </div>
</template>

<script>

import ColorPick from './ColorPick.vue'

export default {
data () {
    return {
        pickedColor: '',
        updatedPlayers : this.Players
    }
},
props: ['Players'],
components: {
    ColorPick
},
methods: {
    newColor (newColor) {
        this.updatedPlayers.color = newColor;
    }
}

};
</script>

<style scoped>
li {
    list-style: none !important;
}
</style>

顏色選擇器

<template>
  <div>
    <form action>
      <input type="radio" name="nameColor" value="yellow" v-model="pickedColor" @change="colorChosen" /> Yellow
      <br />
      <input type="radio" name="nameColor" value="red" v-model="pickedColor" @change="colorChosen" /> Red
      <br />
      <input type="radio" name="nameColor" value="blue" v-model="pickedColor" @change="colorChosen" /> Blue
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickedColor: "",
    };
  },
  methods: {
      colorChosen(pickedColor) {
         this.$emit ('newColor', pickedColor);
      }
  }
};
</script>

<style>
</style>

Answer 1

老實說，如果層次結構中有兩個組件，那么這並不真正需要 Vuex。 您只需要考慮您的組件以及它們如何交互。

如果PlayerCard組件有一個子ColorPicker組件，那么ColorPicker組件應該發出一個帶有PlayerCard顏色的事件是正確的。 PlayerCard組件可以只偵聽該事件並設置它需要的任何綁定：

<!-- /components/PlayerCard.vue -->
<template>
    <div v-bind:style="{ 'background-color': this.backgroundColor }">
        <color-picker v-bind:value="backgroundColor" v-on:input="updateBackgroundColor" />
    </div>
</template>

<script>
    export default {
        components: {
            ColorPicker
        },
        data() {
            return {
                backgroundColor: '#000' // default
            };
        },
        methods: {
            updateBackgroundColor(event) {
                this.backgroundColor = event.target.value;
            }
        }
    }
</script>

---

<!-- /components/ColorPicker.vue -->
<template>
    <div>
        <input type="color" v-on:input="onInput" v-bind:value="value" />
    </div>
</template>

<script>
    export default {
        methods: {
            onInput(event) {
                this.$emit('input', event);
            }
        },
        props: {
            value: {
                required: true,
                type: String
            }
        }
    }
</script>

這里我們有兩個組件。 當ColorPicker的輸入更改其值時，它將input事件傳遞給PlayerCard組件，然后設置背景顏色作為響應。

ColorPicker組件也仍然是“愚蠢的”，因為它對正在使用的組件一無所知——它實際上只是允許用戶選擇一種顏色。 父組件監聽input事件並做一些響應。 因此，這使得ColorPicker組件可重用於為您的PlayerCard組件選擇其他顏色，即文本顏色。

這里沒有什么 Vuex 可以解決正確編寫的 Vue 組件無法完成的問題。 Vuex 只會讓解決問題變得更容易，而不是解決任何問題。 但是 Vuex確實在更大的應用程序中占有一席之地。

Answer 2

我注意到您的事件偵聽器是 @colorChosen（在您的 PersonCard.vue 中），但是您正在發出“newColor”，將其更改為 @newColor（在您的 PersonCard.vue 中）。 看看是否有幫助。

<ColorPick @newColor="newColor"></ColorPick>

是的，Vuex 可以讓組件之間的狀態位傳遞變得輕而易舉。 隨着您的應用程序的增長和擴展，跟蹤您的所有發射可能會變得有點棘手。