应用系统定制开发Pinia+Vue3使用案例及Pinia持久化存储

应用系统定制开发为什么要使用

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

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

安装

 npm install pinia
1

配置

新建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 };
1
2
3
4
5
6
7
8
9
10
11

以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);}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

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

存储状态并持久化存储

安装 pinia-persistedstate-plugin

npm install pinia-persistedstate-plugin
1

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 };
1
2
3
4
5
6
7
8
9
10
11
12

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