Javascript 在Vue中维护关联对象

我是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)
            });
        }
    }
})

我的实体组件从创建的钩子中的存储中加载用户。实体的数据是从计算属性

entity（）

的存储中获取的。此外，所有用户的列表由计算属性

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>

{{user.name}

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

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

{{user.name}

这就是我被困的地方： 我是否应该将device.users的计算属性与get（）和set（）一起使用，并在复选框中将其用作v-model？我试过了，但并没有成功，因为所有用户列表的用户对象和device.users列表的对象不是相同的对象，即使它们代表相同的用户。在这一点上，我认为我正在以一种复杂的方式完成整个工作，而我只是忽略了vue用户通常采用的方式

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

---

感谢您的回答，如果需要更多代码/详细信息，我将提供它们

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

在computed中，创建一个新属性（这样您就不会为v-for中的每个元素重新计算相同的数组）：

然后为返回true或false的复选框值提供一个简单函数：

：value=“userIdsWithEntity.includes（user.id）”

---

使用@change来处理复选框的（取消）检查，并向vuex发送一个操作，以将用户删除/添加到实体中。

thx，这基本上是一个很好的起点！现在如何在同一组件上维护包含所有选定用户的第二个列表？我将分别编辑我的问题。我进一步认为你的意思是：checked而不是ceckbox上的：value，对吗？是的，它应该是：checked。HTML输入就这样奇怪；p不同的问题，但可能最好使用

v-for=“id in userIdsWithEntity”

生成该列表，并像创建实体一样为用户创建一个getter

user:state=>id=>state.users.find（user=>user.id==id）

。然后如何访问用户名？我该如何实现两个列表的同步？同步应该在更新实体时自动进行。这两个列表都依赖于userIdsWithEntity，因此，如果添加/删除用户功能正确地更新了实体，则此属性应更新这两个列表。访问user.name的方式与访问entity.id的方式相同。

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

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