Pinia

已于 2022-12-17 10:13:16 修改
阅读量141 收藏
点赞数
分类专栏： VUE 文章标签： vue.js javascript 前端
于 2022-12-16 12:36:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WJLSH123/article/details/128341106
版权

简介

前言 全局状态管理工具

Pinia.js 有如下特点：

完整的 ts 的支持；
足够轻量，压缩后的体积只有1kb左右;
去除 mutations，只有 state，getters，actions；
actions 支持同步和异步；
代码扁平化没有模块嵌套，只有 store 的概念，store 之间可以自由使用，每一个store都是独立的
无需手动添加 store，store 一旦创建便会自动添加；
支持Vue3 和 Vue2
官方文档Pinia

git 地址 https://github.com/vuejs/pinia

1.起步 安装

npm install pinia

2.引入注册Vue3

import { createApp } from 'vue'
import App from './App.vue'
import {createPinia} from 'pinia'
 
const store = createPinia()
let app = createApp(App)
 
 
app.use(store)
 
app.mount('#app')

Vue2 使用

import { createPinia, PiniaVuePlugin } from 'pinia'
 
Vue.use(PiniaVuePlugin)
const pinia = createPinia()
 
new Vue({
  el: '#app',
  // other options...
  // ...
  // note the same `pinia` instance can be used across multiple Vue apps on
  // the same page
  pinia,
})

初始化

创建store文件夹
在store/index.ts下

import { defineStore } from 'pinia'

import { Names } from "./namespace/index";


/**
 * 参数一：唯一名称
 */
// 简单写法： export const useTestStore = defineStore('Name',{})

export const useTestStore = defineStore(Names.Test, {
  state: () => {
    return {
      name: '李四'
    }
  },
  //类似于computed 可以帮我们去修饰我们的值
  getters: {

  },
  //可以操作异步 和 同步提交state
  actions: {

  }

})

在store/namespace/index.ts下

export const enum Names {
  Test = 'TEST'
}

state使用

<!-- name -->
<template>
  <div>
    {{ Test.name }}
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs } from "vue";

import { useTestStore } from "./store/index";    // 引入

const Test = useTestStore();      // 
</script>

<style scoped lang="less"></style>

state修改值

1.State 是允许直接修改值的 例如current++

<template>
     <div>
         <button @click="Add">+</button>
          <div>
             {{Test.current}}
          </div>
     </div>
</template>
 
<script setup lang='ts'>
import {useTestStore} from './store'
const Test = useTestStore()
const Add = () => {
    Test.current++
}
 
</script>

2.批量修改State的值
在他的实例上有$patch方法可以批量修改多个值

<template>
     <div>
         <button @click="Add">+</button>
          <div>
             {{Test.current}}
          </div>
          <div>
            {{Test.age}}
          </div>
     </div>
</template>
 
<script setup lang='ts'>
import {useTestStore} from './store'
const Test = useTestStore()
const Add = () => {
    Test.$patch({
       current:200,
       age:300
    })
}
 
</script>

3.批量修改函数形式
推荐使用函数形式 可以自定义修改逻辑

<template>
     <div>
         <button @click="Add">+</button>
          <div>
             {{Test.current}}
          </div>
          <div>
            {{Test.age}}
          </div>
     </div>
</template>
 
<script setup lang='ts'>
import {useTestStore} from './store'
const Test = useTestStore()
const Add = () => {
    Test.$patch((state)=>{
       state.current++;
       state.age = 40
    })
}
 
</script>

4.通过原始对象修改整个实例
$state您可以通过将store的属性设置为新对象来替换store的整个状态

缺点就是必须修改整个对象的所有属性

<template>
     <div>
         <button @click="Add">+</button>
          <div>
             {{Test.current}}
          </div>
          <div>
            {{Test.age}}
          </div>
     </div>
</template>
 
<script setup lang='ts'>
import {useTestStore} from './store'
const Test = useTestStore()
const Add = () => {
    Test.$state = {
       current:10,
       age:30
    }    
}
 
</script>

5.通过actions修改
定义Actions

在actions 中直接使用this就可以指到state里面的值

import { defineStore } from 'pinia'
import { Names } from './store-naspace'
export const useTestStore = defineStore(Names.TEST, {
     state:()=>{
         return {
            current:1,
            age:30
         }
     },
 
     actions:{
         setCurrent () {
             this.current++
         }
     }
})

使用方法直接在实例调用

<template>
     <div>
         <button @click="Add">+</button>
          <div>
             {{Test.current}}
          </div>
          <div>
            {{Test.age}}
          </div>
     </div>
</template>
 
<script setup lang='ts'>
import {useTestStore} from './store'
const Test = useTestStore()
const Add = () => {
     Test.setCurrent()
}
 
</script>

解构store

在Pinia是不允许直接解构是会失去响应性的

const Test = useTestStore()
 
 
const { current, name } = Test
 
console.log(current, name);

差异对比

修改Test current 解构完之后的数据不会变

而源数据是会变的

<template>
  <div>origin value {{Test.current}}</div>
  <div>
    pinia:{{ current }}--{{ name }}
    change :
    <button @click="change">change</button>
  </div>
</template>
  
<script setup lang='ts'>
import { useTestStore } from './store'
 
const Test = useTestStore()
 
const change = () => {
   Test.current++
}
 
const { current, name } = Test
 
console.log(current, name);
 
 
</script>

解决方案可以使用 storeToRefs

import { storeToRefs } from 'pinia'
 
const Test = useTestStore()
 
const { current, name } = storeToRefs(Test)

其原理跟toRefs 一样的给里面的数据包裹一层toref

源码 通过toRaw使store变回原始数据防止重复代理

循环store 通过 isRef isReactive 判断 如果是响应式对象直接拷贝一份给refs 对象 将其原始对象包裹toRef 使其变为响应式对象

action与getters使用

Actions（支持同步异步）

1.同步 直接调用即可

// store/index.ts
import { defineStore } from 'pinia'
import { Names } from './store-naspace'
export const useTestStore = defineStore(Names.TEST, {
    state: () => ({
        counter: 0,
    }),
    actions: {
        increment() {
            this.counter++
        },
        randomizeCounter() {
            this.counter = Math.round(100 * Math.random())
        },
    },
})

<template>
     <div>
         <button @click="Add">+</button>
          <div>
             {{Test.counter}}
          </div>    
     </div>
</template>
 
<script setup lang='ts'>
import {useTestStore} from './store'
const Test = useTestStore()
const Add = () => {
     Test.randomizeCounter()
}
 
</script>

2.异步 可以结合async await 修饰

import { defineStore } from 'pinia'
import { Names } from './store-naspace'
 
type Result = {
    name: string
    isChu: boolean
}
 
const Login = (): Promise<Result> => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve({
                name: '小满',
                isChu: true
            })
        }, 3000)
    })
}
 
export const useTestStore = defineStore(Names.TEST, {
    state: () => ({
        user: <Result>{},
        name: "123"
    }),
    actions: {
        async getLoginInfo() {
            const result = await Login()
            this.user = result;
        }
    },
})
template

<template>
     <div>
         <button @click="Add">test</button>
          <div>
             {{Test.user}}
          </div>    
     </div>
</template>
 
<script setup lang='ts'>
import {useTestStore} from './store'
const Test = useTestStore()
const Add = () => {
     Test.getLoginInfo()
}
 
</script>

3.多个action互相调用getLoginInfo setName

    state: () => ({
        user: <Result>{},
        name: "default"
    }),
    actions: {
        async getLoginInfo() {
            const result = await Login()
            this.user = result;
            this.setName(result.name)
        },
        setName (name:string) {
            this.name = name;
        }
    },

getters

1.使用箭头函数不能使用this this指向已经改变指向undefined 修改值请用state

主要作用类似于computed 数据修饰并且有缓存

    getters:{
       newPrice:(state)=>  `$${state.user.price}`
    },

2.普通函数形式可以使用this

    getters:{
       newCurrent ():number {
           return ++this.current
       }
    },

3.getters 互相调用

    getters:{
       newCurrent ():number | string {
           return ++this.current + this.newName
       },
       newName ():string {
           return `$-${this.name}`
       }
    },

API

  1. $ reset
    重置store到他的初始状态
state: () => ({
     user: <Result>{},
     name: "default",
     current:1
}),

Vue 例如我把值改变到了10

const change = () => {
     Test.current++
}

调用$reset();

将会把state所有值 重置回 原始状态

2.订阅state的改变
类似于Vuex 的abscribe 只要有state 的变化就会走这个函数

Test.$subscribe((args,state)=>{
   console.log(args,state);
   
})

第二个参数

如果你的组件卸载之后还想继续调用请设置第二个参数

Test.$subscribe((args,state)=>{
   console.log(args,state);
   
},{
  detached:true
})

3.订阅Actions的调用
只要有actions被调用就会走这个函数

Test.$onAction((args)=>{
   console.log(args);
   
})

pinia 常驻

方式一：
一、通过pinia-plugin-persist插件来进行pinia的数据持久化操作
二、使用步骤
1.首先下载安装插件
代码如下（示例）：

npm i pinia-plugin-persist --save --include=dev
// 或者使用 yarn 安装
yarn add pinia-plugin-persist

2.在main.ts/main.js中引入
代码如下（示例）：

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from "pinia"
// 数据持久化插件
import piniaPersist from 'pinia-plugin-persist'
const pinia = createPinia()
pinia.use(piniaPersist)
const app = createApp(App)
app.use(pinia)
app.mount('#app')
  1. 具体模块中的使用看下面的代码
import { defineStore } from "pinia";
export const useHome = defineStore('home', {
  state: ()=>{
    return {
      studyCourse: 0,
      num: 1,
      msg: '测试'
    }
  },
  persist: {
    enabled: true, // 开启存储
    // **strategies: 指定存储位置以及存储的变量都有哪些,该属性可以不写，不写的话默认是存储到sessionStorage里边，默认存储state里边的所有数据**
    strategies:[
      { storage: localStorage, paths: ['studyCourse', 'num']}
      // storage 存储到哪里 sessionStorage/localStorage
      // paths是一个数组,要存储缓存的变量,当然也可以写多个
      // paths如果不写就默认存储state里边的所有数据，如果写了就存储指定的变量
    ]
  },
  actions: {
    addStudyCourse () {
      this.studyCourse++
    }
  },
})

方式二：

const __piniaKey = '__PINIAKEY__'
//定义兜底变量
 
 
type Options = {
   key?:string
}
//定义入参类型
 
 
 
//将数据存在本地
const setStorage = (key: string, value: any): void => {
 
localStorage.setItem(key, JSON.stringify(value))
 
}
 
 
//存缓存中读取
const getStorage = (key: string) => {
 
return (localStorage.getItem(key) ? JSON.parse(localStorage.getItem(key) as string) : {})
 
}
 
 
//利用函数柯丽华接受用户入参
const piniaPlugin = (options: Options) => {
 
//将函数返回给pinia  让pinia  调用 注入 context
return (context: PiniaPluginContext) => {
 
const { store } = context;
 
const data = getStorage(`${options?.key ?? __piniaKey}-${store.$id}`)
 
store.$subscribe(() => {
 
setStorage(`${options?.key ?? __piniaKey}-${store.$id}`, toRaw(store.$state));
 
})
 
//返回值覆盖pinia 原始值
return {
 
...data
 
}
 
}
 
}
 
 
//初始化pinia
const pinia = createPinia()
 
 
//注册pinia 插件
pinia.use(piniaPlugin({
 
key: "pinia"
 
}))

原文链接：https://blog.csdn.net/qq1195566313/article/details/123431769

WJLSH123
关注
专栏目录
大壮考了小帅 5 道 Pinia 必问面试题
07-06
【Pinia 框架详解】 Pinia 是一个针对 Vue.js 3 的状态管理库，它设计的主要目的是简化应用程序中的状态管理。Pinia 基于 Vue.js 3 的新特性和 TypeScript 支持，提供了更为高效和类型安全的方式来管理应用的状态。 ...
新一代状态管理工具，Pinia.js 上手指南
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
01-15 1437
点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群前言Pinia.js 是新一代的状态管理器，由 Vue.js团队中成员所开发的，因此也被认为是下一代的 Vuex，即...
[VUE3]新一代状态管理工具，Pinia.js 上手指南
SCUhzs
02-28 691
新一代状态管理工具，Pinia.js 上手指南 前言 Pinia.js 是新一代的状态管理器，由 Vue.js团队中成员所开发的，因此也被认为是下一代的 Vuex，即 Vuex5.x，在 Vue3.0 的项目中使用也是备受推崇。 Pinia.js 有如下特点： 完整的 typescript 的支持； 足够轻量，压缩后的体积只有1.6kb; 去除 mutations，只有 state，getters，actions（这是我最喜欢的一个特点）； actions 支持同步和异步； 没有模块嵌套，只有 stor
vue3前端开发系列 - pinia小菠萝使用详细说明
硅谷工具人
10-06 1588
官网地址：https://pinia.vuejs.org/zh/主要优点：完整的ts支持体积小，只有1kb左右去除mutations，只有state,getter,actionactions支持同步与异步代码扁平化没有模块嵌套，只有store的概念，store之间可以自由使用，每个store都是独立的。无需手动添加store，store一旦创建便会自动添加支持 vue2和vue3支持插件扩展功能什么时候可以使用？保存全局信息的时候，例如登录的个人信息。
认识pinia
qq_43806488的博客
04-06 1289
认识pinia 介绍pinia 介绍pinia pinia是新一代的vue状态管理工具，具有如下特点 完整的 ts 的支持； 足够轻量，压缩后的体积只有1kb左右; 去除 mutations，只有 state，getters，actions； actions 支持同步和异步； 代码扁平化没有模块嵌套，只有 store 的概念，store 之间可以自由使用，每一个store都是独立的 无需手动添加 store，store 一旦创建便会自动添加； 支持Vue3 和 Vue2 安装pinia yarn add
vite+vue3动态模块化导入并使用pinia
03-25
在现代前端开发中，Vue3、Vite和Pinia是三个关键的技术组件，它们共同构建了一个高效、灵活的开发环境。下面将详细讲解这三个技术及其结合使用的方式。 **Vue3** 是Vue.js框架的最新版本，它带来了许多性能优化和新...
pinia学习笔记pinia学习笔记
03-15
Pinia是Vue.js生态中的一个状态管理库，它是Vuex的替代品，旨在提供更简单、更直观的API，使得在Vue应用中管理和共享状态变得更为便捷。Pinia结合了Vuex的优点并优化了一些繁琐的步骤，使得开发过程更加流畅。 在...
uniapp + vue3 + TypeScript + pinia + uviewplus
11-03
在当前的项目中，"uniapp + vue3 + TypeScript + pinia + uviewplus" 的组合代表了现代前端开发的一种高效、强大的解决方案。这个技术栈主要用于构建跨平台的移动应用，充分利用了各组件的优势，提供了良好的开发...
vue3+ts+less+vite+pinia+axios基础封装项目模版
03-26
Vue 3 Vue 3是Vue.js的最新版本，带来了许多改进和新特性，包括更快的性能、更小的体积、更好的TypeScript支持以及...Pinia是Vue.js的状态管理库，是Vuex的轻量级替代方案。它提供了直观和简洁的API，使得状态管理
【pinia】使用记录
xh1506101064的博客
06-23 864
全局状态管理器1、体积 ，pinia只有1KB左右，相较于vuex体积小了不是一点点。 2、状态管理pinia没有mutation,他只有state，getters，action【同步、异步】使用他来修改state数据，而vuex的状态管理有state，mutation，getters，action 3、更好的支持ts所以pinia很轻量，适合轻量级的应用。轻量级的小项目用pinia是完全没问题的。 然后设置为全局对象，在main.js里面引用 创建一个store管理状态 vue3语法糖写法 就改装上面
pinia---状态管理工具详解
cTiebo的博客
09-19 872
pinia状态管理工具
在外部 JS 文件中使用 Pinia
FantasyWeirdo的博客
07-11 3680
依靠 Pinia 实例，在所有调用中共享同一个store实例。大多数情况下，只需调用useStore()函数，即可开箱即用。例如，在setup()中，您无需执行任何其他操作，实际上，useStore()给你的 app 自动注入了 pinia 实例。但在组件之外，情况有些不同，意味着如果 pinia 无法自动注入实例，则必须手动将其提供给useStore()函数。你可以根据不同的应用，以不同的方式解决这个问题。
Pinia的使用
xccevol的博客
06-07 1902
Pinia.js 是新一代的状态管理器，由 Vue.js团队中成员所开发的，因此也被认为是下一代的 Vuex，即 Vuex5.x，在 Vue3.0 的项目中使用也是备受推崇。完整的 typescript 的支持；足够轻量，压缩后的体积只有1.6kb;去除 mutations，只有 state，getters，actions；actions 支持同步和异步；没有模块嵌套，只有 store 的概念，store 之间可以自由使用，更好的代码分割；
Pinia的简单使用
m0_73101944的博客
05-08 115
1.pinia 和 vuex 具有相同的功效， 是 Vue 的存储库，它允许您跨组件/页面共享状态。2.设计使用的是 Composition api，更符合vue3的设计思维。3.Pinia 对 Vue 2 和 Vue 3 都有效，并且不需要您使用组合 API。注：vue2对vuex的兼容性好，pinia则对vue3+ts更兼容。
学习Pinia
weixin_60196946的博客
12-05 420
Pinia.js 有如下特点：完整的 ts 的支持；足够轻量，压缩后的体积只有1kb左右;去除 mutations，只有 state，getters，actions；actions 支持同步和异步；代码扁平化没有模块嵌套，只有 store 的概念，store 之间可以自由使用，每一个store都是独立的无需手动添加 store，store 一旦创建便会自动添加；支持Vue3 和 Vue2pinia的链接:pinia。
在组件外(.js文件)中使用pinia的方法
k0933的博客
01-10 2274
1、在stores中新建index.js。2 、在main.js中引入并注册。3、在http.js中引入并传入。
pinia基础知识
MM_520131400的博客
04-23 2294
pinia使用
Pinia.js - Vue新一代状态管理器
青年码农
08-24 543
Pinia.js是由Vue.js团队核心成员开发的新一代状态管理器，使用Composition Api进行重新设计的，也被视为下一代Vuex。它和Vuex有很多相似的地方，本质上是对Vuex做出了一些改进。与Vuex相比，Pinia.js去除了Vuex中对于同步函数Mutations和异步函数Actions的区分。直接在Actions中便能够使用同步和异步方法，其次相比于Vuex，Pinia.js...
vue3替代vuex的框架piniajs实例教程
峰会路转的博客
01-03 2180
vue的更新相当之快，我们的学习脚步也要紧跟上！vue里面的中重难点是状态管理，官方的vuex已经更新到vuex5.0了，很多替代vuex的轻量级框架也层出不穷！比如今天我要介绍的piniajs，去掉了mutation操作state里面数据的方法，数据的操作更简便，没有了vuex的繁琐 piniajs官方文档链接 该库的详细文档大家可以去官网研究！下面我来学习利用该框架实现vue的todolist应用 最终的实现效果 ###vite搭建v3项目 安装piniajs yarn add pinia # o
router pinia
最新发布
09-04
`pinia`是Vue 3框架中官方推荐的状态管理模式，由尤雨溪（You Xuyi）创建并引入于Vue 3.5版本，它类似于React的Redux或Vue 2.x中的Vuex。Pinia的设计理念是轻量级、无侵入性和组件化，主要用于管理应用中的全局状态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值