pinia的使用

这篇具有很好参考价值的文章主要介绍了pinia的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. pinia和vuex的区别

  • pinia没有mutations,只有:state、 getters、 actions
  • pinia分模块不需要modules(之前vuex分模块需要modules)
  • pinia体积更小(性能更好)
  • pinia可以直接修改state数据

2.安装pinia

npm i pinia

根据需要 安装pinia-plugin-persist插件,实现持久化存储

npm i pinia-plugin-persist

3.main.ts中导入

import { createApp } from 'vue'
import App from './App.vue'

import { createPinia } from 'pinia' // 从pinia中导入createPinia方法
import piniaPersist from 'pinia-plugin-persist'  //导入持久化存储

const app = createApp(App)

const pinia = createPinia()
pinia.use(piniaPersist)    //使用持久化存储,不需要可不写

app.use(pinia) // 使用vue实例的use方法,告诉vue我们要使用pinia
app.mount('#app')

4.创建store

新建store文件夹,新建userInfo.ts模块文件来存放用户信息相关的数据,因为pinia中没有modules区分模块,store下的每个文件就是一个模块

创建store很简单,调用pinia中的defineStore函数即可,该函数接收两个参数:

name:一个字符串,必传项,该store的唯一id。
options:一个对象,store的配置项,比如配置store内的数据,修改数据的方法等等。
我们可以定义任意数量的store,因为我们其实一个store就是一个函数,这也是pinia的好处之一,让我们的代码扁平化了,这和Vue3的实现思想是一样的。

import { defineStore } from 'pinia' //从pinia中导入,defineStore方法,用于定义一个新的store

// 第一个参数是应用程序中 store 的唯一 id,最好和文件名同意
export const userInfoStore = defineStore('userInfo', { // 使用defineStore方法定义store
  state:() => {                       // state表示这个store里的状态,也就是存放数据的地方
    return {
      userName: 'pinia定义的数据',       // 这里我们定义了一个数据叫userName,用于存放我们的用户名 
    }
  },
  getters: {
    double: (state) => '姓名:' + state.userName,
  },
  actions: {
    // 修稿state的值
    changeStateVal(val: any) {
      this.userName = val
    }
  },

  // 持久化存储配置
  persist: {
    enabled: true , // pinia-plugin-persist 是否开启持久化存储, 默认sessionStorage
    strategies: [{
      // key: 'userInfo',      //存储的key,默认当前store的key 
      // paths: ['userName'],   //哪个属性需要持久化存储,默认全是
      storage: localStorage    //使用localStorage存储
    }]
  }
})

5.使用store

引入使用即可,pinia中有多种方式可以修改state中的数据文章来源地址https://www.toymoban.com/news/detail-427050.html

<template>
  <div>
    {{ store.userName }}
    <button @click="handleUpdatePinia">修改pinia数据</button>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { storeToRefs } from "pinia";     //和vue中toRefs的作用一模一样
import { userInfoStore } from "../store/userInfo";  //直接引入store中定义的 userInfoStore
const store = userInfoStore();           // 然后实例化


const handleUpdatePinia = () => {
  // 第一种方式:直接修改
  // store.userName = 'dfads'    //直接修改pinia的数据

  // 第二种方式 通过$patch
  // 1.
  // store.$patch({
  //   userName: "被修改的值",
  // });

  // 2.
  // store.$patch((state) => {
  //   state.userName = "被修改的值";
  // });

  //第三种方式 通过actions里的方法修改
  store.changeStateVal("被修改的值"); //可以直接给actions里面的方法传递参数
};


</script>

到了这里,关于pinia的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Ubuntu22 启动后只有鼠标没有桌面

    本人机器配置:CPU Intel Core i7-11700,显卡 Nidia Quadro P400 ,操作系统为 Ubuntu22.04.3 现象:刚安装的操作系统,在隔天(断电)重新启动时出现只有鼠标没有桌面的情况 查阅了网上的资料: 有说搜狗输入法的(我刚安装的系统,肯定不是这个情况) 有说驱动相关的(有可能是这

    2024年01月18日
    浏览(46)
  • 电脑网络本地连接只有发送没有接收怎么办?

    今天项目组同事遇到这样的网络问题,地连接只有发送没有接收,这样就无法访问网络了,该如何解决呢。 1、IP地址,子网掩码和网关是否设置正确!!! 2、用ping命令 ping 网卡 (ping 127.0.0.1),再 ping 自己的IP地址,检查网卡是否有问题,这步检测过后 ,我发现网卡没有问

    2024年02月07日
    浏览(287)
  • 大二一个学期学这么点内容,没有概念,只有实操

    如何查看所有的数据库: Show databases; 如何进入某个数据库: use xxx; 如何新进数据库: Create database jx; 如何删除数据库: Drop database jx; 如何查看所有的表格: Show tables; 如何创建数据表: create table teacher(id int,name varchar(10),address varchar(100),score float,time date); 如何修改表(添加列

    2024年02月01日
    浏览(38)
  • 内存取证常见例题思路方法-volatility (没有最全 只有更全)

    目录 1.从内存文件中获取到用户hacker 的密码并且破解密码,将破解后的密码作为 Flag值提交; 2.获取当前系统的主机名,将主机名作为Flag值提交; 3.获取当前系统浏览器搜索过的,作为Flag提交; 4.获取当前内存文件的 ip地址 5.当前系统中存在的挖矿进程,请获取指向的矿

    2023年04月09日
    浏览(40)
  • Pinia 刷新页面store数据更新页面没有变化,响应式失效

    当我在组件的 setup 中使用 useStore 来获取 store 的时候,Pinia.js 的 store 已经被更新了,但是组件渲染没变化。 当count我们在结构赋值的时候数据丢失了响应式 1.计算属性 2.使用storeToRefs

    2024年02月11日
    浏览(43)
  • 电脑网络连接失败 网卡只有发送没有接收该怎么办?

    在日常生活中,网络故障问题很多。但是有时出现网卡明明已经显示已连接,但是就是上不了网。这个问题困扰不少人。现在希望这篇文章能解开你的困扰。 1、首先要确定你的网络是否正常连接 包括你路由器连接。因为也有些用户经常连接路由器有误。进来网线先到Modem,

    2024年02月08日
    浏览(50)
  • 使用taro或react框架的,针对微信小程序隐私协议的组件封装,网上找了很久都没有相关模版,只有自己写了一个,现分享给有困难的同伴

    注意:我是使用hooks的,其他可以参考封装思路大同小异的 首先写一个PrivacyAgreement.js文件 样式文件index.scss如下 在需要用到隐私协议的组件或者api的页面里面引用

    2024年02月05日
    浏览(50)
  • 【Springboot + Vue 视频播放web项目】解决视频播放只有声音没有画面

    使用vue-video-player作为视频播放插件,捣鼓挺久de了一堆bug之后终于能读取本地MP4视频文件,但是只有声音没有画面 前端也是能够正确地根据url找到文件,音频也是正确的 经过前端堂哥的指点,首先把上面这个url直接输入到浏览器,看能不能正常播放,结果也是只有声音没有

    2024年02月16日
    浏览(44)
  • 浅显易懂-Verilog中什么时候用wire?什么时候用reg?wire与reg只有又有啥区别?如何去选择性的使用呢?

    在使用FPGA的时候我们经常会遇到这样一个问题,这个信号我们到底是定义成wire类型还是定义成reg类型,如果定义不对编译软件也会通不过,有时候你通过编译软件的的提示将它改了回来,但你却并不明白是为什么会报错,而且下次还会再出现,当它再次出现时,我们又得重

    2024年02月04日
    浏览(36)
  • 【网络安全无小事】汽车网络安全:只有开局,没有尽头,聚光向前,安全到达

    “  汽车网络安全: 只有开局,没有尽头,聚光向前,安全到达。 ” 汽车一直以来都将速度、激情、男性荷尔蒙和阳刚气息联系在一起,这种联系似乎已经成为了文化符号。然而,作为一名安全从业者,我时常担心智能汽车被黑客远程控制,就像在《速度与激情8》动作电影

    2024年02月07日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包