vuexlink里面的同一个组件如何显示多次

Question

我是 Vue 和 Vuex 的新手。我制作了一个带有单选按钮的组件，该组件与商店双向绑定。

现在该组件正在运行，我想通过多次调用它来将它用于多个项目，并向它指示它应该绑定到 vuex 存储的哪个项目。这样，我将能够循环包含应用单选按钮修改的所有项目的数组。

在我的店里，我有这个数组：

state { 
    [...other data...]
    arrayX { 
       item1: { name : 'a', value : 'nok'}
       item2: { name : 'b', value : 'ok}},
    [...other data...]

此数组与组件内的 v-model 绑定：

<template>
    <div class="radio">
            <input type="radio" name="a" value="nok" v-model="arrayX.item1.value" id="nok"/>
            <label for="nok"> Nok </label>
          </div>
          <div class="radio">
            <input type="radio" name="a" value=""  v-model="arrayX.item1.value" id="empty"/>
            <label for="empty">None</label>
          </div>
          <div class="radio">
            <input type="radio" name="a" value="ok_but" v-model="arrayX.item1.value" id="ok_but"/>
            <label for="ok_but">Ok but</label>
          </div>
          <div class="radio">
            <input type="radio" name="a" value="ok" v-model="arrayX.item1.value" id="ok"/>
            <label for="ok">Ok</label>
          </div>
        </div>   

    </template>


<script>
import { mapFields } from 'vuex-map-fields';
  export default {
    name: 'SwitchColors',
    computed:{
      ...mapFields(['arrayX' ])
    }
  }
</script>

Answer 1

我在我的 Vue 2 CLI 沙盒应用程序中创建了一个示例场景。每个单选按钮组件通过计算属性绑定到 Vuex 存储数组元素。我将存储数组索引值作为 prop 从父级传递给无线电组件。

RadioButtonVuex.vue

<template>
  <div class="radio-button-vuex">
    <hr>
    <div class="row">
      <div class="col-md-6">
        <input type="radio" value="One" v-model="picked">
        <label>One</label>
        <br>
        <input type="radio" value="Two" v-model="picked">
        <label>Two</label>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      pickedIndex: {
        type: Number,
        required: true
      }
    },
    computed: {
      picked: {
        get() {
          return this.$store.state.radioSelections[this.pickedIndex].picked;
        },
        set(newValue) {
          this.$store.commit('updateSelection', { index: this.pickedIndex, newValue: newValue });
        }
      }
    },
  }
</script>

<style scoped>
  label {
    margin-left: 0.5rem;
  }
</style>

Parent.vue

<template>
  <div class="parent">
    <h3>Parent.vue</h3>
    <radio-button-vuex :pickedIndex="0" />
    <radio-button-vuex :pickedIndex="1" />
  </div>
</template>

<script>
  import RadioButtonVuex from './RadioButtonVuex.vue'

  export default {
    components: {
      RadioButtonVuex
    }
  }
</script>

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    radioSelections: [
      {
        picked: 'One'
      },
      {
        picked: 'Two'
      }
    ]
  },
  mutations: {
    updateSelection(state, payload) {
      state.radioSelections[payload.index].picked = payload.newValue;
    }
  }
})

vuexlink里面的同一个组件如何显示多次

How to display many times the same component with vuex link inside

vue.js

vue-component

vuex