0

我有一个带有输入和添加按钮的简单页面。在此之下，我列出了所有项目。

<template>
  <div class="page-container">
    <form @submit.prevent="insertRoom" class="form-container" autocomplete="off" method="post" accept-charset="utf-8">
      <h3>Add room</h3>
      <label class="form-input-container" for="roomName">
        <input v-model="roomName" type="text" name="roomName" spellcheck="false" placeholder="Room name">
      </label>
      <input class="form-button" type="submit" value="Add">
    </form>
    <list
      :list-title="'Room list'"
      :list-array="rooms"
      :remove-item="deleteRoom"
    />
  </div>
</template>

如何刷新另一个客户端上所有项目的列表？例如，如果我在两台不同的 PC 上打开相同的页面，并且添加一个新项目（房间）。在第二台电脑上，这个房间列表在我刷新页面之前不会改变。

<script>
import { mapActions, mapState } from 'vuex'
import List from '~/components/List.vue'

export default {
  components: {
    List
  },

  data () {
    return {
      roomName: null
    }
  },

  computed: {
    ...mapState({
      rooms: state => state.rooms
    })
  },

  methods: {
    insertRoom () {
      this.addRoom({
        roomName: this.roomName
      })
    },

    deleteRoom (room) {
      this.removeRoom({
        roomName: room
      })
    },

    ...mapActions({
      addRoom: 'addRoom',
      removeRoom: 'removeRoom'
    })
  }
}
</script>
4

0 回答 0