时间戳

首页 > 解决方案 > Vue Js 我应该为此使用 Vuex 吗？

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

问题描述

我正在通过小型研讨会来学习 Vuejs。我有 2 个组件；PersonCard 和 ColorPick 以及一组数据。我可以为人员数据中​​的每个人创建一张新的人员卡，并且在每个人员卡中我可以创建一个颜色选择器（单选按钮），但我很难将“拾取的颜色”返回到人员卡的渲染位置用作样式绑定？我一直在尝试使用 $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>

个人卡片.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>

颜色选择.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>

标签： javascriptvue.jsvuex

解决方案

老实说，如果你在一个层次结构中有两个组件，那么这并不需要 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 组件无法完成的问题。Vuex 只会让围绕问题编写代码变得更容易，而不是解决任何问题。但是 Vuex确实在更大的应用程序中占有一席之地。

推荐阅读