Pinia+Vue3使用案例及Pinia持久化存储

最新推荐文章于 2025-10-11 22:00:42 发布

原创最新推荐文章于 2025-10-11 22:00:42 发布 · 7.2k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #typescript

Vue3 同时被 2 个专栏收录

17 篇文章

订阅专栏

Vite2.0

7 篇文章

订阅专栏

本文介绍Vue.js的状态管理库Pinia的使用方法，包括其优势、安装步骤及如何配置持久化存储，适合希望优化Vue应用状态管理的开发者。

为什么要使用Pinia

Pinia是Vue的一个存储库，它允许你跨组件/页面共享状态。如果你熟悉Composition API，你可能会认为你已经可以通过一个简单的导出const state = reactive({})来共享一个全局状态。这对于单页应用程序是正确的，但如果是服务器端呈现，则会暴露应用程序的安全漏洞。但即使是在小的单页应用程序中，你也可以通过使用Pinia获得很多:

热模块替换
修改存储而无需重新加载页面
在开发过程中保持任何现有状态
使用插件扩展Pinia功能
为JS用户提供正确的TypeScript支持或自动补全
服务器端渲染支持

安装

 npm install pinia

配置

新建sotre仓库

index.ts

import type { App } from "vue";
import { createPinia } from "pinia";

const store = createPinia();

export function setupStore(app: App<Element>) {
  app.use(store);
}

export { store };

以premession.ts模块为例

import { defineStore } from "pinia";
import { store } from "../index";

export const usePermissionStore = defineStore({
  id: "pure-permission",
  state: () => ({
    // 静态路由生成的菜单
    name: "permission",
    linkId: 0,
    // 整体路由生成的菜单（静态、动态）
    wholeMenus: [],
    // 深拷贝一个菜单树，与导航菜单不突出
    menusTree: [],
    buttonAuth: [],
    // 缓存页面keepAlive
    cachePageList: [],
  }),
  actions: {},
});

export function usePermissionStoreHook() {
  return usePermissionStore(store);
}

main.ts引入store

在这里插入图片描述

使用案例

<template>
  <div class="RelationGraph">
    <div>{{ num }}</div>
    <div class="addNum"></div>
    <el-button color="#626aef" @click="clickHandler">Default</el-button>
  </div>
</template>

<script lang="ts" setup>
import { ElButton } from "element-plus";
import { usePermissionStoreHook } from "../../store/modules/premession";
import { ref } from "vue";
const num = ref<number>(0);
const clickHandler = () => {
  num.value++;
  usePermissionStoreHook().$state.linkId = num.value;
  console.log(
    "store:",
    usePermissionStoreHook().$state.linkId,
    "num:",
    num.value
  );
};
</script>

<style scoped lang="less">
.RelationGraph {
  padding-top: 160px;
}
</style>

页面刷新后，数据会重置，安装类似vuex- persistdstate的pinia插件解决。

存储状态并持久化存储

安装 pinia-persistedstate-plugin

npm install pinia-persistedstate-plugin

store>index.ts

import type { App } from "vue";
import { createPinia } from "pinia";

import { createPersistedState } from "pinia-persistedstate-plugin";
const store = createPinia();
store.use(createPersistedState());
export function setupStore(app: App<Element>) {
  app.use(store);
}

export { store };

二次刷新，数据用以持久化存储。