打赏作者
感谢打赏,创作不易~
  • 微信
  • 支付宝

快速上手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'],//需要持久化的变量
      },
      })
posted @   Lanny-Chung  阅读(400)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
点击右上角即可分享
微信分享提示