Vue Js я должен использовать Vuex для этого?

Question

Я работаю через мини-мастерские для изучения Vuejs. У меня есть 2 компонента; PersonCard и ColorPick и набор данных. Я могу создать новую карточку человека для каждого человека внутри данных человека, и в каждой карточке человека я могу создать палитру цветов (переключатели), но я озадачен тем, как вернуть «Выбранный цвет» туда, где отображается карточка человека. использоваться в качестве привязки стиля? Я пытался использовать $ emit, но это не работает. Любой совет будет приветствоваться.

Я почти уверен, что не могу захватить и установить updatedPlayers.color, так как updatedPlayers - это массив, который повторяется в шаблоне, но как мне настроить таргетинг на указанного c 'игрока 'в updatedPlayers для обновления своего цвета на основе $ emit?

приложения. vue

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

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

ColorPick. vue

<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 может просто прослушивать это событие и устанавливать любое связывание, в котором оно нуждается:

<!-- /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 компоненты не могут быть выполнены sh. Vuex просто облегчит кодирование проблем, а не их решение. Но Vuex имеет место в более крупных приложениях.

Answer 2

Я заметил, что ваш прослушиватель событий - @colorChosen (в вашей PersonCard. vue), но вы отправляете "newColor", измените его на @newColor (в вашей PersonCard. vue). Посмотрите, поможет ли это.

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

И да, Vuex может сделать передачу битов состояния от компонента к компоненту быстрым. По мере того как ваше приложение растет и расширяется, оно может стать немного сложным, чтобы отслеживать все ваши выбросы.