如何使用 Vuex 来存储聊天会话列表及其消息？

1. 设置 Vuex

首先，确保你在项目中安装了 Vuex。如果你使用的是 Vue CLI 创建的项目，可以直接安装：

npm install vuex

Copy
Bash

然后在你的 Vue 项目中创建一个 store 目录，接着创建一个 index.js 文件，作为 Vuex 的入口文件。

2. 创建 Vuex Store

在 store/index.js 中，配置 Vuex 仓库来存储聊天会话列表和消息：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    chatList: [], // 用于存储会话列表
    messages: {}, // 用于存储每个会话的消息，键为会话ID
  },
  mutations: {
    ADD_CHAT(state, chat) {
      state.chatList.push(chat);
    },
    ADD_MESSAGE(state, { chatId, message }) {
      if (!state.messages[chatId]) {
        Vue.set(state.messages, chatId, []);
      }
      state.messages[chatId].push(message);
    },
    UPDATE_CHAT(state, { chatId, lastMessage, timestamp }) {
      const chat = state.chatList.find(chat => chat.id === chatId);
      if (chat) {
        chat.lastMessage = lastMessage;
        chat.timestamp = timestamp;
      }
    },
  },
  actions: {
    addChat({ commit }, chat) {
      commit('ADD_CHAT', chat);
    },
    addMessage({ commit }, { chatId, message }) {
      commit('ADD_MESSAGE', { chatId, message });
      commit('UPDATE_CHAT', {
        chatId,
        lastMessage: message.content,
        timestamp: message.timestamp,
      });
    },
  },
  getters: {
    getChatList: state => state.chatList,
    getMessages: (state) => (chatId) => {
      return state.messages[chatId] || [];
    },
  },
});

Copy
JavaScript

3. 使用 Vuex Store

在 main.js 中引入 Vuex 存储并挂载到 Vue 实例：

import Vue from 'vue';
import App from './App.vue';
import store from './store'; // 引入 Vuex 存储

Vue.config.productionTip = false;

new Vue({
  store, // 将 Vuex 存储挂载到 Vue 实例
  render: h => h(App),
}).$mount('#app');

Copy
JavaScript

4. 更新 ChatList 组件

在 ChatList.vue 中，可以通过 mapGetters 来获取聊天列表数据。例如：

<template>
  <view class="chat-list">
    <view v-for="chat in chatList" :key="chat.id" class="chat-item" @click="goToChat(chat.id)">
      <image :src="chat.avatar" class="avatar" />
      <view class="chat-content">
        <view class="chat-name">{{ chat.name }}</view>
        <view class="chat-message">{{ chat.lastMessage }}</view>
      </view>
      <view class="chat-info">
        <view class="chat-time">{{ formatTimestamp(chat.timestamp) }}</view>
        <view v-if="chat.unreadCount > 0" class="unread-count">{{ chat.unreadCount }}</view>
      </view>
    </view>
  </view>
</template>

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

export default {
  computed: {
    ...mapGetters(['getChatList']),
    chatList() {
      return this.getChatList; // 使用 Vuex 中的聊天列表
    },
  },
  methods: {
    goToChat(chatId) {
      uni.navigateTo({
        url: `/pages/ChatPage.vue?id=${chatId}`,
      });
    },
    formatTimestamp(timestamp) {
      const date = new Date(timestamp);
      return date.getHours() + ':' + String(date.getMinutes()).padStart(2, '0');
    },
  },
};
</script>

Copy
Vue

5. 发送消息时更新 Vuex

当用户发送消息时，可以在合适的地方（例如聊天页面的消息输入部分）使用 Vuex 的 actions 来更新聊天会话和消息。例如在 ChatPage.vue 中：

<template>
  <view>
    <view v-for="message in messages" :key="message.id">
      <text>{{ message.content }}</text>
    </view>
    <input v-model="messageContent" placeholder="输入消息 ..." />
    <button @click="sendMessage">发送</button>
  </view>
</template>

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

export default {
  data() {
    return {
      messageContent: '',
    };
  },
  computed: {
    ...mapGetters(['getMessages']),
    messages() {
      const chatId = this.$route.query.id;
      return this.getMessages(chatId); // 获取聊天消息
    },
  },
  methods: {
    ...mapActions(['addMessage']),
    sendMessage() {
      if (!this.messageContent) return;
      const chatId = this.$route.query.id;
      const message = {
        content: this.messageContent,
        timestamp: Date.now(),
      };
      // Dispatch action to update Vuex store
      this.addMessage({ chatId, message });
      this.messageContent = ''; // 清空输入框
    },
  },
};
</script>

Copy
Vue

说明

1. Vuex Store:

   • 存储了 chatList 和 messages，分别用于管理会话列表和每个会话中的消息。
   • 定义了 mutations 和 actions 用于修改状态和处理异步行为。

2. 获取聊天列表:

   • 在 ChatList 组件中使用 mapGetters 从 Vuex 中获取聊天列表。

3. 聊天页面:

   • 在 ChatPage 组件中使用 mapGetters 获取对应聊天会话的消息，并通过 mapActions 来发送新消息，自动更新 Vuex 中的状态。

标签：
来源：