当前位置：首页 > news >正文

Vue3使用pinia做全局状态管理的简单示例

news 2026/6/28 21:28:43

一、插件版本：

"pinia": "^2.0.23",
"pinia-plugin-persist": "^1.0.0",
"vue": "^3.4.27"

二、store目录

src/store/index.ts

import type { App } from 'vue'; import { createPinia } from 'pinia'; import piniaPersist from 'pinia-plugin-persist'; const store = createPinia(); store.use(piniaPersist); export function setupStore(app: App<Element>) { app.use(store); } export { store };

src/store/tableStore.ts

import { Ref, ref } from 'vue'; import { defineStore } from 'pinia'; import { store } from '@/store'; export interface ITableStoreState { tableRef: Ref; list: Map<any, any>[]; } export const tableOrgStore = defineStore({ id: 'tableOrganization', state: (): ITableStoreState => ({ tableRef: ref(), list: [], }), persist: { enabled: true, }, getters: { getList(): ITableStoreState['list'] { return this.list; }, }, actions: { setList(info: ITableStoreState['list']) { this.list = info; }, }, }); // Need to be used outside the setup export function useTableStoreWidthOut() { return tableOrgStore(store); }

三、main.ts

。。。省略。。。 // 挂载状态管理 setupStore(app); 。。。省略。。。

四、在main.ts所在项目的任意组件中使用：

import { storeToRefs } from 'pinia'; import { useTableStoreWidthOut } from '@/store/modules/tableStore'; const tableStore = useTableStoreWidthOut(); const { tableRef, getList } = storeToRefs(tableStore); // 响应式数据使用storeToRefs包裹再解构获取 const { setList } = tableStore; // function方法直接解构获取

使用tableRef示例：

<template> <button @click="handleClick">click</button> <my-list ref="tableRef" /> </template> <script lang="ts" setup> import { storeToRefs } from 'pinia'; import { useTableStoreWidthOut } from '@/store/modules/tableStore'; import MyList from './MyList.vue'; const tableStore = useTableStoreWidthOut(); const { tableRef } = storeToRefs(tableStore); // 响应式数据使用storeToRefs包裹再解构获取 const handleClick = () => { console.log('===tableRef====', tableRef); }; </script>