使用v-for

Question

想象一下三个组件First.vue，Second.vue和Third.vue 他们共享一些信息，管理所有更改并访问我使用Vuex的数据。 它完美无缺。这里没问题。为了保持store干净整洁，每个组件都有模块。

然后，我们有一个名为Card.vue的组件。它由上面提到的三个组成部分组成。

在App.vue中，我使用v-for指令根据需要创建尽可能多的Card。

<template>
  <div>
     <card v-for="card in cards" :id="card"></card
  </div>
</template>

<script>
 export default {
   data () {
     return {
        cards: [] // items being dynamically added to this array  
 }
</script>

根据您的理解，当我们生成多个Card.vue时，我们会使用相同数据的多个卡。换句话说，当我更改卡＃1 的输入字段中的任何值时，我将更改提交到$store，并在其他地方更新状态（在卡＃2 中，卡＃3 等......）我需要的是分离这些卡数据。如何设计 Vuex 来实现该目标。

分享STATE和COMPONENTS

$store

import job from './modules/job'    
import paper from './modules/paper'
import admin from './modules/admin'
import * as getters from './getters'
import * as mutations from './mutations'

export const store = new Vuex.Store({
      getters,
      mutations,
      modules: {
        job,
        paper,
        admin
      }
    })

我使用三个模块并将我的getter和mutin保存在单独的js文件中。模块文件具有相同的结构。例如，Job.js就像：

const state = {
  paper: {
    paperWidth: null,
    paperHeight: null,
    typeOfPaper: null,

    ...// other state data
  }
}

const getters = {
  paper: state => state.paper
}

const mutations = {
  updatePaper (state, paper) {
    Object.assign(state.paper, paper)
  },

  ...// other local mutations go here


export default {
  state,
  getters,
  mutations
}  

我没有行动。现在不需要了。

三个组件是Job.vue，Paper.vue和Rseults.vue。他们从各自的模块和全球store获得状态和突变。

import {mapMutations, mapGetters} from 'vuex'

export default {
        computed: {
          ...mapGetters([
            'job',
            'paper',

            ...// other shared mutations from store      
          ])
        },
        methods: {
          ...mapMutations([
            'fourPlusFour',
            'fourPlusZero',
            'updateJob',

            ...// other shared mutations from store  
          ])
        }
      }