Question

在 src/renderer/store 目录下新建 index.ts，创建第一个 Store 程序，代码如下：

import { defineStore } from 'pinia';
import { Ref, ref } from 'vue';
import { ModelChat } from '../../model/ModelChat';

// mock data
const prepareData = () => {
  let result = [];
  for (let i = 0; i < 10; i++) {
    let model = new ModelChat();
    model.fromName = '聊天对象' + i;
    model.sendTime = '昨天';
    model.lastMsg = '这是此会话的最后一条消息' + i;
    model.avatar = 'https://pic3.zhimg.com/v2-306cd8f07a20cba46873209739c6395d_im.jpg?source=32738c0c';
    result.push(model);
  }
  return result;
};

export const useChatStore = defineStore('chat', () => {
  let data: Ref<ModelChat[]> = ref(prepareData());
  const selectItem = (item: ModelChat) => {
    if (item.isSelected) return;
    data.value.forEach((v) => (v.isSelected = false));
    item.isSelected = true;
  };
  return { data, selectItem };
});

通过 export 暴露 useChatStore 方法，这个方法通过 Pinia 的 defineStore 方法创建，在 Vue 业务组件中执行这个函数实例才会得到真正的 Store。

使用 defineStore(name, callback) 的形式创建 Store，这种形式的 Store 叫作 Setup Stores。Pinia 还提供了另一种形式的 Store ：Option Stores，具体可以参阅 Pinia 的官方文档。

这个 Store 的状态数据存储在：data 属性中，这是一个被 Ref 对象包裹着的数组，数组里的内容是通过 prepareData 方法模拟的（模拟了十个聊天会话对象）。

这个 Store 还提供了一个 actions 方法：selectItem，这个方法用于选中某个具体的聊天会话。