为什么要使用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 };
二次刷新,数据用以持久化存储。
先自我介绍一下,小编13年上师交大毕业,曾经在小公司待过,去过华为OPPO等大厂,18年进入阿里,直到现在。深知大多数初中级java工程师,想要升技能,往往是需要自己摸索成长或是报班学习,但对于培训机构动则近万元的学费,着实压力不小。自己不成体系的自学效率很低又漫长,而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家,初衷也很简单,就是希望帮助到想自学又不知道该从何学起的朋友,同时减轻大家的负担。添加下方名片,即可获取全套学习资料哦