海口建设局网站,商务之家网,做私活 网站,北京住房和城乡建设厅网站首页文章目录 前言一、pinia是什么#xff1f;二、安装pinia三、注册pinia四、使用pinia定义数据及方法使用 优化如有启发#xff0c;可点赞收藏哟~ 前言
vue2以前一直使用vuex实现状态管理 vue3之后推出了pinia… 一、pinia是什么#xff1f;
直观、类型安全、轻便灵活的Vue … 文章目录 前言一、pinia是什么二、安装pinia三、注册pinia四、使用pinia定义数据及方法使用 优化如有启发可点赞收藏哟~ 前言
vue2以前一直使用vuex实现状态管理 vue3之后推出了pinia… 一、pinia是什么
直观、类型安全、轻便灵活的Vue Store使用具有DevTools支持的组合api
二、安装pinia
由于pinia本身没有提供设置缓存的功能不过可以结合pinia-plugin-persistedstate实现
npm i pinia -S
npm i pinia-plugin-persistedstate -S三、注册pinia
main.ts文件
import { createApp } from vue;
import { createPinia } from pinia;
import piniaPluginPersistedstate from pinia-plugin-persistedstate
import App from ./App/index.vue;const app createApp(App);
// 注册 pinia , 并在 pinia 使用 piniaPluginPersistedstate
app.use(createPinia().use(piniaPluginPersistedstate));
app.mount(#app);
四、使用pinia 大部分开发都默认在 stores 目录放置缓存相关文件 定义数据及方法
pinia有两种写法其中一个是同vuex类似的选项式这种才能结合pinia-plugin-persistedstate设置浏览器缓存还有一个就是更符合vue3组合式写法
stores/mapState.ts 选项式
import { defineStore } from pinia;export interface MapState {address: string;
}
const { SIS_STORE_NAME } import.meta.env;export const useMapStore defineStore(SIS_STORE_NAME map, {state: (): MapState ({address: ,}),getters: {},actions: {setAdress(address: string) {this.address address;},clearMessage() {this.address ;},},persist: {/*** 使用的存储* default $store.id*/key: SIS_STORE_NAME map,/*** 存储位置* default localStorage*/storage: sessionStorage,/*** 需要设置缓存的state 如果未设置即存储所有state* default undefined*/// paths: [],/*** 存储之前* default null*/beforeRestore: () {},/*** 存储之后* default undefined*/afterRestore: () {},/*** 启用时在控制台中记录错误。* default false*/debug: true,},
});stores/counter.ts 组合式
import { ref, computed } from vue;
import { defineStore } from pinia;export const useCounterStore defineStore(counter, () {const count ref(0);const doubleCount computed(() count.value * 2);function increment() {count.value;}return { count, doubleCount, increment };
});使用
如果是字段数据需要使用storeToRefs 获取为响应式的方法不用 虽然上述两种定义不同但调用使用方式是一样的
import { storeToRefs } from pinia;
import { useMapStore } from ./stores/mapState;
import { useCounterStore } from ./stores/counter;const { address } storeToRefs(useMapStore())
const { setAdress, clearMessage } useMapStore()
setAdress()
clearMessage()const { count } storeToRefs(useCounterStore())
const { increment } useCounterStore()
increment()
console.log(count)优化
stores/index.ts
import type { App } from vue;
import { createPinia } from pinia;
import piniaPluginPersistedstate from pinia-plugin-persistedstateconst store createPinia().use(piniaPluginPersistedstate);// 全局注册 store
export function setupStore(app: AppElement) {app.use(store);
}
export { store };main.ts
import { createApp } from vue;
import App from ./App/index.vue;
import { setupStore } from ./stores;
const app createApp(App);
// 全局注册 状态管理(store)
setupStore(app)
app.mount(#app); 如有启发可点赞收藏哟~
