确保同一组件的多个实例具有非共享状态

Question

我有一个应用程序，其中我有一个显示值的计数器，以及一个可以递增该值的按钮。

我使用simple state management from scratch as the docs suggest。

我可以使用“添加计数器”按钮将计数器添加到此列表中，以便我在页面上有多个计数器。

尽管我的counter组件的每个实例在父组件（as per the docs）中都有一个单独的键，但counter的每个实例都共享相同的值：

如何添加具有自己状态的同一组件的单独实例？

以下是webpackbin上的代码：http://www.webpackbin.com/41hjaNLXM

代码：

App.vue

<template>
  <div id="app">
    <counter v-for="n in state.countersAmount" :key="n"></counter>
    <button v-on:click="addCounter">Add a Counter</button>
  </div>
</template>

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

  const store = {
    state: {
      countersAmount: 1
    },
    incrementCounters() {
      ++this.state.countersAmount
    }
  }

  export default {
    data() {
      return {
        state: store.state
      }
    },
    methods: {
      addCounter() {
        store.incrementCounters()
      }
    },
    components: {
      Counter
    }
  }
</script>

Counter.vue

<template>
    <div>
        <h1>{{state.counterValue}}</h1>
        <button v-on:click="increment">+</button>
    </div>
</template>
<script>
const store = {
    state: {
        counterValue: 0,
    },
    increment() {
        ++this.state.counterValue
    }
}
export default {
    data() {
        return {
            state: store.state
        }
    },
    methods: {
        increment() {
            store.increment()
        }
    }
}
</script>

Answer 1

您为每个<div class="container"> @foreach ($data['data'] as $user) {{ $user['first_name'] }} @endforeach </div> 个实例使用相同的state。

Counter

上面的代码只会执行一次，此组件的每个实例都会共享此const store = { state: { counterValue: 0, }, increment() { ++this.state.counterValue } } 。

要更改此设置，只需返回一个新对象作为初始状态，如下所示：

state

您链接的 Scratch简单状态管理用于组件之间的共享状态，如图所示：

Answer 2

您始终返回组件的同一实例。相反，您应该返回一个新实例。