快速上手vue前端存储库、全局状态管理工具pinia
-
pinia是什么,为什么我们要使用pinia?
- pinia是vue全局状态管理工具,类似vueX,用于全局的数据状态存储、修改变更等等
- 相较于vueX,pinia的使用较为简单,轻量级,上手容易,干掉了vueX的层层套娃
-
快速安装配置pinia
- 安装依赖 npm install pinia
- 创建一个store
// 创建一个store文件,对全局属性、方法变量进行管理 import { defineStore } from "pinia"; //defineStore返回一个函数进行调用,参数一为命名,即存储在本地的名称,参数二是对应的配置 //state 用于变量的存储,getters是计算属性,action是方法集合,同步异步方法均可执行 export const useStore = defineStore('store', { state:()=>({ count:0, }), getters:{ }, actions:{ increaseCount(){ this.count++; } } }) - 挂载pinia到vue上,vue js入口文件,main.js中操作
import { createPinia } from 'pinia'; app.use(createPinia());
-
如何使用pinia
//在需要使用的组件中,引入刚才导出的变量 useStore,注意,该变量是defineStore返回的函数 import { useStore } from './store'; const authStore = useStore(); // 使用变量 console.log(authStore.count); // 调用方法 authStore.increaseCount(); -
数据持久化操作,避免页面刷新,数据就没了
- 这里推荐插件 pinia-plugin-persistedstate
-
// 安装依赖 npm install pinia-plugin-persistedstate // 在挂载pinia到vue前,配置持久化,main.js入口文件中操作 import { createPinia } from 'pinia'; // 引入持久化插件 import { createPersistedState } from 'pinia-plugin-persistedstate'; const pinia = createPinia(); pinia.use(createPersistedState({ serializer: { // 指定参数序列化器 serialize: JSON.stringify, deserialize: JSON.parse, } })); app.use(pinia);// 挂载pinia -
// 创建一个store文件,对全局属性、方法变量进行管理 import { defineStore } from "pinia"; //defineStore返回一个函数进行调用,参数一为命名,参数二是对应的配置 //state 用于变量的存储,getters是计算属性,action是方法集合,同步异步方法均可执行 export const useStore = defineStore('store', { state:()=>({ count:0, }), getters:{ }, actions:{ increaseCount(){ this.count++; } }, // 持久化配置 persist: { key: 'store',//存储本地的名字 storage:window.localStorage,//存储地址,可选sessionStorage paths:['count'],//需要持久化的变量 }, })
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!