javascript - 在Vue中维护关联对象

Question

我是 vue 新手，但我也仔细阅读了 vue 和 vuex 的文档。但我遇到了以下问题。我也确实认为这并不是说我不会以某种方式完成它，但我想采取一种干净且可能是最佳实践的方法。

设置:- 我有一些实体- 我有一些用户- 假设一个实体可以属于多个用户

现在我想要完成的是显示所有已检查并分配给实体的用户的列表。

我有以下 vuex 商店:

export default new Vuex.Store({
    state: {
        users: [],
        entities: []
    },
    getters: {
        USERS: state => state.users,
        ENTITIES: state => state.entities,
        ENTITY: state => id => {
            return state.entities.find(entity => entity.id == id)
        }
    },
    mutations: {
        SET_USERS: (state, payload) => {
            state.users = payload
        },
        SET_ENTITIES: (state, payload) => {
            state.entities = payload
        },
        UPDATE_DEVICE: (state, payload) => {
            state.entities = state.entities.map(entity => {
                if(entity.id === payload.id){
                    return Object.assign({}, entity, payload.data)
                }
                return entity
            })
        }
    },
    actions: {
        GET_USERS: async (context) => {
            let { data } = await Axios.get('/api/v1/users')
            context.commit('SET_USERS', data)
        },
        GET_ENTITIES: async (context) => {
            let { data } = await Axios.get('/api/v1/entities')
            context.commit('SET_ENTITIES', data)
        },
        UPDATE_ENTITY: ({commit}, payload) => {
            Axios.put('/api/v1/entities/' + payload.id + '/', payload.data).then((response) => {
                commit('UPDATE_ENTITY', payload)
            });
        }
    }
})

我的实体组件从创建的 Hook 中的存储加载用户。实体的数据是通过计算属性 entity() 从存储中获取的。此外，所有用户的列表由计算属性 users() 提供。

created(){
   if(!this.$store.getters.USERS.length) this.$store.dispatch('GET_USERS')
},
computed: {
   entity(){
      const entityId = this.$route.params.id
      return this.$store.getters.ENTITY(entityId)
   },
   users(){
      return this.$store.getters.USERS
   }
}

然后在模板中我显示所有用户和一个复选框:

<ul>
   <li v-for="(user, i) in users" :key="i">
      <input type="checkbox" :value="user" :id="'user_'+i" :name="'user_'+i" v-model="???" />
      <label :for="'user_'+i">{{user.name}}</label>
   </li>
</ul>

我还有第二个列表，其中包含属于同一组件模板内的实体的所有用户，如下所示，我希望与“可选择列表”保持同步。因此，所有选中复选框的用户都应列在该列表中:

<ul>
   <li v-for="user in entity.users" :key="user.id">
      {{user.name}}
    </li>
</ul>

这就是我陷入困境的地方:我应该使用带有 get() 和 set() 的 device.users 计算属性并将其用作复选框上的 v 模型吗？我尝试过，但它没有起作用，因为所有用户列表的用户对象和 device.users 列表的对象不是相同的对象，即使它们代表相同的用户。在这一点上，我认为我正在以复杂的方式完成整个事情，而我只是忽略了实践过的 vue 用户的常见方式。

长话短说:解决这个任务的最佳方法是什么？我认为这是一项最常见的任务。

感谢您的每一个回答，如果需要更多代码/详细信息，我当然会提供它们!

Answer 1

实体的结构是什么样的？假设他们有一个数组“users”，您可以通过提供一个基本的 javascript 函数来计算该复选框的值，该函数检查该用户的唯一 ID 是否在此实体的列表中。

在计算中创建一个新属性(这样您就不必为 v-for 中的每个元素重新计算相同的数组):

userIdsWithEntity() {
  if (!this.entity) return [];  // necessary in case entity hasn't been instantiated yet
  return this.entity.users.map(x => x.id)
}

然后为返回 true 或 false 的复选框值提供一个简单的函数::value="userIdsWithEntity.includes(user.id)"

不要使用 v-model(即 :value 和 @input/@change 来更新 :value 中提供的属性，将其合并到一个指令中，因此您可能会与 :value 定义发生冲突)，而是使用 @change 来处理(取消)检查复选框，向 vuex 分派(dispatch)一个操作以将该用户删除/添加到实体中。