编辑从计算属性返回的数组中的对象

Question

在我的 Vuex 商店中，我通过 Firebase/Firestore API 调用获得了一组房间，看起来像这样：[{label:'Kitchen', decription:'...'}, ...]，我通过Vuex getter 函数。自然地，在我的组件中，我然后接收这个数组作为计算属性。但在我的 CRUD 组件中，我实际上通过另一个计算的属性路由此 "original" 数组，以便我可以将几个临时属性附加到数组中的每个对象 - workable: () => this.rooms.map(val => { return ...val, editing: false, loading:false, ... })。这些附加属性是 CRUD 组件专门需要的，因此保留在原始数组、数据源或应用程序中的其他任何地方都没有意义。

我现在遇到的问题是我显然需要能够更新 CRUD 数组中的这些临时属性，但我不能，因为（AFAIU）我的计算属性需要设置器来更新vuex 存储中的原始数组，在我的例子中，它必须更新数据源，以完成循环。（请注意，我并不完全理解我在本段中所说的大部分内容，因此请随时纠正任何错误的假设。）

所以我的问题是如何在不将这些更改（和属性）传播回数据源的情况下更新数组对象中的临时属性？

这是我的代码的简化版本，可帮助您直观地了解当前的工作方式：

// store.js (Vuex)
const actions = {
  load: ({ commit, getters }) => {
    const query = firebase.roomCollection.where('user', '==', getters.user.id);
    const unsub = query.onSnapshot(snap => {

      const rooms = snap.docs.map(val => {
        return {
          id: val.id,
          ...val.data(),
          timestamp: val.data().timestamp.toDate(),
        };
      });

      commit('setRooms', rooms);
    });
  },
};

const mutations = {
  setRooms: (state, payload) => state.rooms = payload,
};

const state = {
  rooms: [],
};

const getters = {
  rooms: state => state.rooms,
};

// RoomCrud.vue
<template>
  <ul>
    <li v-for="room in workable" :key="`room-${i}`">
      {{ room.label }}
      <button @click="room.editing = !room.editing">Edit</button>
      <br />
      room: {{ room }} <!-- room.editing doesn't change when the Edit button gets clicked -->
    </li>
  </ul>
</template>

<script>
  import { mapGetters } from 'vuex';

  export default {
    computed: {
      ...mapGetters(['rooms']),
      workable() {
        return this.rooms.map(val => {
          return {
            ...val,
            editing: false,
            loading: false
          };
        });
      }
    }
  }
</script>

我尝试将 workable 设为（最初为空）数据属性，然后使用一种方法 (setWorkable()) 将附加属性添加到每个数组，然后调用 setWorkable() on mounted()，它成功地从 rooms 分离了 workable，但是这种方法的问题是当我更改为我想要一直传播回源的数组中的对象之一。

我意识到这可能是完成我想做的事情的唯一方法，但我希望有更好的方法只使用计算属性，这样我就不必手动重新渲染每个时间进行更改。

如果我需要包含任何其他信息，请告诉我。

Answer 1

我建议通过添加一个动作 edit 来更改将整个逻辑放入商店的方法，当您通过房间 index 单击该按钮并更改行状态：

// store.js (Vuex)
const actions = {
 edit:({commit,state},index)=>{
     commit('editRoom', index);
  },
  load: ({ commit, getters }) => {
    const query = firebase.roomCollection.where('user', '==', getters.user.id);
    const unsub = query.onSnapshot(snap => {

      const rooms = snap.docs.map(val => {
        return {
          id: val.id,
          ...val.data(),
            editing: false,
            loading: false,
          timestamp: val.data().timestamp.toDate(),
        };
      });

      commit('setRooms', rooms);
    });
  },
};

const mutations = {
  setRooms: (state, payload) => state.rooms = payload,
   editRoom:(state,index)=> {
          state.rooms[index].editing=!state.rooms[index].editing;
           Vue.set(state.rooms,index,state.rooms);


       }
};

const state = {
  rooms: [],
};

const getters = {
  rooms: state => state.rooms,
};

RoomCrud.vue

<template>
  <ul>
    <li v-for="(room,i) in rooms" :key="`room-${i}`">
      {{ room.label }}
      <button @click="edit({index:i})">Edit</button>
      <br />
      room: {{ room }}
    </li>
  </ul>
</template>

<script>
  import { mapGetters,mapActions } from 'vuex';

  export default {
    methods:{
            ...mapActions(["edit"]),
        } ,
    computed: {
      ...mapGetters(['rooms']),

    }
  }
</script>

编辑从计算属性返回的数组中的对象

Editing object in array returned from computed property

javascript

vue.js

vuejs2

vuex

computed-properties

编辑从计算 属性 返回的数组中的对象

Editing object in array returned from computed property

javascript

vue.js

vuejs2

vuex

computed-properties

编辑从计算属性返回的数组中的对象