为什么 vue.js 中的 list-transition 不能与 vuex 数组一起正常工作？答案

【问题标题】：Why does list-transition in vue.js doesn't work properly with vuex arrays?为什么 vue.js 中的 list-transition 不能与 vuex 数组一起正常工作？
【发布时间】：2020-03-21 07:00:59
【问题描述】：

我正在使用 vue.js 和 vuex。我试图构建类似Vue.js list-transition docs 的东西，但我遇到了一个问题，即 vue.js list-transition 在我使用 vuex 创建的示例中无法正常工作。 JSFiddle 上的示例：click.

这里是 vue.js 代码：

const store = new Vuex.Store({
  state: {
    items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
  },
  getters: {
    items(state) {
      return state.items;
    },
  },
  mutations: {
    delete(state, payLoad) {
      state.items.splice(payLoad, 1);
    },
  },
  actions: {
    delete(store, payLoad) {
      store.commit('delete', payLoad);
    },
  },
});
const app = new Vue({
  store,
  el: '#app',
  template: `<div id="list-demo">
    <button v-on:click="remove">Delete</button>
    <transition-group name="list" tag="p">
        <span v-for="(item,index) in items" v-bind:key="index" class="list-item">
      {{ item }}
        </span>
    </transition-group>
    </div>`,
  computed: {
    items() {
      return store.state.items;
    }
  },
  methods: {
    remove: function() {
      this.$store.dispatch('delete', 0);
    },
  },
});

【问题讨论】：

标签： vue.js vuex

【解决方案1】：

好的，我解决了这个问题，问题出在关键属性上，当我拼接一个数组时，索引正在改变，所以动画不能正常工作。如果我将 key 属性设置为 item

，它将起作用

【讨论】：