提供一个vue3的pinia示例,管理outKnowId，outHotId，outCommonId，noticeId

在 Vue3 中，你可以使用 Pinia（Vuex 的官方推荐替代品）来管理状态。Pinia 将状态管理和组件解耦，使得状态更易于测试和理解。以下是创建一个 Pinia store 示例，用于管理 `outKnowId`, `outHotId`, `outCommonId`, 和 `noticeId`：

首先，你需要安装 pinia 和相关插件：

npm install @vue/pinia vuex-persistedstate

然后，在你的项目中创建一个名为 `store.js` 的文件，用于设置 Pinia store:

import { createAppStore } from '@vue/pinia';
import { persistState } from 'vuex-persistedstate';

export const idStore = createAppStore({
  id: {
    state: () => ({
      outKnowId: '',
      outHotId: '',
      outCommonId: '',
      noticeId: '',
    }),
    getters: {
      // 可选：获取当前值的辅助函数
      getOutKnowId: (state) => state.outKnowId,
      // 其他getter...
    },
    actions: {
      // 更新状态的方法
      updateOutKnowId(newId) {
        this.outKnowId = newId;
      },
      // 其他action...
    },
    mutations: {
      // 更改状态的方法
      setOutKnowId(id) {
        this.outKnowId = id;
      },
      // 其他mutation...
    },
  },
});

// 初始化存储的状态
persistState(['id'], idStore);

export default idStore;

要在组件中使用这个 store，导入并注入到组件的 `setup` 函数中：

import { useIdStore } from './store.js'; // 引入 store

export default {
  setup() {
    const { outKnowId, updateOutKnowId } = useIdStore(); // 注入store到组件

    // 组件内的状态管理
    onMounted(() => {
      // 设置初始值
      updateOutKnowId('your_initial_id');
    });

    // 当需要更新 ID 时
    function handleUpdateId(newId) {
      updateOutKnowId(newId);
    }

    return {
      outKnowId,
      handleUpdateId,
    };
  },
};

现在你已经有一个简单的 Pinia store 来管理这四个 ID。