当前位置:主页 > vue > pinia的使用

pinia的使用

xi11个月前 (11-09)vue16150

前言

最近新开了个项目,以前老项目都是vue2+vuex开发的,都说用vue3+pinia爽得多,那新项目就vue3+pinia吧。这里记录一下pinia的使用。

使用方法

  1. 安装pinia:

    npm i pinia
  2. main.js中引入pinia:

    //main.js
    import { createApp } from 'vue';
    import { createPinia } from 'pinia';
    import App from './App.vue';
    const app = createApp(App);
    const pinia = createPinia();
    app.use(pinia);
    app.mount('#app')
  3. 创建store仓库:

  • 在src下创建store目录,目录下创建index.js文件:

  • 在index.js中利用pinia的defineStore方法创建仓库,一般使用只会用到defineStore的前两个参数(第三个参数可做持久化配置),下面是setup组合式写法(你也可以改为选项式写法)。

  • 第一个参数为一个字符串,作为仓库的唯一id;第二个参数为一个方法,内部可定义需要存储的数据,定义完成后返回即可,你可以在此处定义多个数据,也可在defineStore之外多次使用defineStore创建多个仓库。

  • 定义的时候有几个取巧的办法:可以使用ref给数据添加响应式特性。只需定义set方法,无需定义get方法。

    // /store/index.js
    import { defineStore } from "pinia";
    import { ref } from "vue";
    export const piniaStore = defineStore(
      "piniaStore",
      () => {
          const pageData = ref(1);//页面数据
          const setPageData = () => {
              pageData.value = pageData.value * 2;
          };//设置页面数据
    
          return {
              pageData,
              setPageData
          };
      },
    );
  1. 页面使用
  • 使用仓库前必须先引入仓库创建store。
  • 获取仓库数据可借助计算属性computed直接取出。
  • 修改仓库数据可直接调用返回的对应set方法即可,此处方法没有传参直接在仓库内部修改的数据,你也可以传参使用外部数据修改。
<template>
        <h1>{{ pageData }}</h1>
        <button @click="setData">设置数据</button>
</template>
<script setup>
import { computed } from 'vue';
import { piniaStore } from '@/store/index.js';
let store = piniaStore(),//获取仓库
      pageData = computed(() => {
        return store.pageData;//获取仓库中的数据
      });
const setData = () => {
    store.setPageData();//设置仓库中的数据
};
</script>

点击前页面显示:

点击后页面显示:

  • 到此处其实你就已经学会使用pinia了,比vuex简单多了吧?但我当前项目需要对数据进行持久化处理,不处理页面刷新之后数据全部会重置,无法保存状态。

持久化

  • 其实可以直接使用sessionStorage或localstorage实现前端数据持久化。

  • 但数据一旦多了,你会发现代码里面全是setItem、getItem,会有大量的重复代码。

  • 有人说直接封装不久得了?就像这样:

    //storeTools.js
    //写入仓库
    export const setStore = (key, value) => {
      sessionStorage.setItem(key, JSON.stringify(value));
    }
    //读取仓库
    export const getStore = (key) => {
      return JSON.parse(sessionStorage.getItem(key));
    }
    //清除所有仓库
    export const clearStore = () => {
      sessionStorage.clear();
    }
  • 当然你也可以这样做,但在有轮子的情况下,我还是倾向于直接用轮子的,况且轮子提供的功能远比自己封装的方法多。

  • 下面是pinia的持久化步骤:

  1. 安装插件:

    npm i pinia-plugin-persistedstate
  2. main.js引入插件:

    import { createApp } from 'vue';
    import { createPinia } from 'pinia';
    import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
    import App from './App.vue';
    const app = createApp(App);
    const pinia = createPinia();
    pinia.use(piniaPluginPersistedstate);//pinia持久化
    app.use(pinia);
    app.mount('#app')
  3. pinia配置插件,其实就是利用pinia中defineStore方法的第三个参数,直接传入一个对象persist,对象中enabled表示启用持久化,storage表示持久化方式(可选sessionStorage、localstorage):

    import { defineStore } from "pinia";
    import { ref } from "vue";
    export const piniaStore = defineStore(
     "piniaStore",
     () => {
         const pageData = ref(1);//页面数据
         const setPageData = () => {
             pageData.value = pageData.value * 2;
         };//设置页面数据
    
         return {
             pageData,
             setPageData
         };
     },
     {
         persist: {
             enabled: true,
             storage: sessionStorage,
         }
     }
    );
  4. 现在再操作页面后,数据会保存在sessionStorage中,刷新数据不会重置丢失。

结语

其实vuex也有自己的持久化方法,但我还是倾向于pinia,毕竟更简洁方便了。

转载请标注来源与原作者

本文链接:https://xiblogs.top/?id=64

“pinia的使用” 的相关文章

vue中按需引入Element-ui

vue中按需引入Element-ui

安装1、安装element-ui:npm i element-ui -S。2、安装babel-plugin-component:npm install babel-plugin-component -...

vue中代理解决跨域

跨域是什么简单的讲就是你在一个地方使用另一个地方的资源,被浏览器给挡下来了,不让你用!当然,它挡下来是有自己理由的:为了安全(╬▔皿▔)╯。 解决跨域我是用vue开发的,就vue代理模式解决跨域说明...

DataV兼容vue3的方法

DataV兼容vue3的方法

发现问题在使用vue开发大屏时,发现了一个很好用的可视化组件库DataV(http://datav.jiaminghi.com/ ),不是阿里那个DataV哈,用vue2开发时都一切顺利,直到有一天升...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。