帮我写一个vue互相聊天的代码

在Vue.js中创建一个简单的双向聊天应用，我们可以使用Vuex管理状态、Event Bus来进行组件间的通信以及Element UI库构建界面。以下是一个基本的代码示例：

1. 安装依赖:

npm install vuex element-ui axios

2. 创建Vuex store:

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    messages: [],
    inputMessage: ''
  },
  mutations: {
    addMessage(state, message) {
      state.messages.push(message)
    },
    setInputMessage(state, message) {
      state.inputMessage = message
    }
  },
  actions: {
    sendMessage({ commit }, message) {
      // 发送消息到服务器
      axios.post('/api/messages', { content: message }).then(() => {
        commit('addMessage', message)
        commit('setInputMessage', '')
      })
    }
  },
  getters: {
    getMessages(state) {
      return state.messages
    }
  }
})

3. 创建聊天室组件 (Chat.vue):

<template>
  <div>
    <input v-model="inputMessage" @input="updateInputMessage">
    <button @click="sendMessage">发送</button>

    <el-messages :type="messageType" v-model="messages">
      <el-message
        :key="item.id"
        :show-newline="false"
        :class="{ 'sent': item.user === 'me'}"
      >
        {{ item.content }}
      </el-message>
    </el-messages>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['messages', 'inputMessage']),
    messageType() {
      return this.inputMessage ? 'success' : 'info'
    }
  },
  methods: {
    ...mapActions(['sendMessage', 'updateInputMessage']),
    sendMessageOnEnter(e) {
      if (e.key === 'Enter') {
        e.preventDefault();
        this.sendMessage(this.inputMessage);
      }
    }
  },
  watch: {
    inputMessage(newMessage, oldMessage) {
      if (newMessage && newMessage.trim()) {
        this.updateInputMessage(newMessage);
      }
    }
  },
  mounted() {
    // 加载初始消息
    this.$store.dispatch('loadInitialMessages');
  }
}
</script>

4. 初始化数据 (App.vue 或 main.js):

// App.vue 或 main.js
import Vue from 'vue';
import Store from './store/index';

new Vue({
  store,
  render: h => h(Chat),
}).$mount('#app');

5. 聊天历史加载 (actions.js):

// store/actions.js
async action({ commit }) {
  const initialMessages = await axios.get('/api/initial-messages'); // 获取初始聊天记录
  initialMessages.forEach((message) => commit('addMessage', message));
}

这只是一个基础的示例，实际应用中还需要处理用户登录、错误处理和更好的用户体验。记住，在`/api/`路径下的请求通常需要后端支持。