javascript - Vue Js 我应该使用 Vuex 吗？

Question

我正在通过小型研讨会来学习 Vuejs。我有 2 个组件； PersonCard 和 ColorPick 以及一组数据。我可以为人员数据中​​的每个人创建一个新的人员卡，并且在每个人员卡中我可以创建一个颜色选择器(单选按钮)，但我很困惑如何将“选择的颜色”返回到人员卡渲染的位置用作样式绑定(bind)？我一直在尝试使用 $emit 但它不起作用。欢迎任何建议。

我很确定我无法获取和设置updatedPlayers.color，因为updatedPlayers是在模板中迭代的数组，但是如何定位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 组件可以监听该事件并设置它需要的任何绑定(bind):

<!-- /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 确实在大型应用程序中占有一席之地。