状态管理Pinia使用详解(带你入门)

最新推荐文章于 2024-03-09 15:24:28 发布
最新推荐文章于 2024-03-09 15:24:28 发布
阅读量934 收藏 1
点赞数 2
分类专栏： pinia 文章标签： vue.js javascript 前端 pinia
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MoXinXueWEB/article/details/129249398
版权

状态管理Pinia使用详解(带你从入门到入神)

序：

​ 如果你之前使用过 vuex 进行状态管理的话，那么 pinia 就是一个类似的插件。它是最新一代的轻量级状态管理插件。你可以通过defineStore来简单创建一个存储管理。

​ 与 vuex 相比，pinia 提供了一个更简单的 API，具有更少的操作，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。

特点：

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

pinia官网

1.安装

yarn add pinia
 
npm install pinia

2.引入注册Vue3

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
 
onst app = createApp(App)

app.use(createPinia())

app.mount('#app')

3.初始化仓库Store

3.1.新建一个文件夹Store

3.2.新建文件[name].ts

3.3.定义仓库Store

3.4.我们需要知道存储是使用定义的defineStore()，并且它需要一个唯一的名称，作为第一个参数传递

新建文件store-namespace/index.ts

export const enum Names {
    Test = 'TEST'
}

store 引入

import { defineStore } from 'pinia'
import { Names } from './store-namespace'
 
export const useTestStore = defineStore(Names.Test, {
 
})

这个名称，也称为id，是必要的，Pania 使用它来将商店连接到 devtools。将返回的函数命名为*use…*是可组合项之间的约定，以使其使用习惯。

3.5.定义值

State 箭头函数 返回一个对象 在对象里面定义值

import { defineStore } from 'pinia'
import { Names } from './store-namespce'
 
export const useTestStore = defineStore(Names.Test, {
     state:()=>{
         return {
             current:1
         }
     },
     //类似于computed 可以帮我们去修饰我们的值
     getters:{
 
     },
     //可以操作异步 和 同步提交state
     actions:{
 
     }
})

4.State

4.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>
 
<style>
 
</style>

4.2.批量修改State的值

<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>
 
<style>
 
</style>

4.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>
 
<style>
 
</style>

4.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>
 
<style>
 
</style>

4.5.通过actions修改

定义Actions

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

import { defineStore } from 'pinia';
import { store } from '@/store';

export const useModalStore = defineStore({
  id: 'modal',  // 唯一的id
  state: () => ({
    modals: []
  }),
  actions: {
    add(modal) {
      this.modals.push(modal)
    },
    remove(id) {
      let index = this.modals.findIndex(v => v.id == id)
      if (index > -1) {
        this.modals.splice(index, 1);
      }
    }
  },
});

// 在组件setup函数外使用
export function useModalStoreWithOut() {
  return useModalStore(store);
}

使用方法直接在实例调用

<script setup lang='ts'>
iimport { useModalStoreWithOut } from '@/store/modules/modal.store';

const modalStore = useModalStoreWithOut();

modalStore.remove({ id });
modalStore.add({ modal });
 
</script>
 
<style>
 
</style>

5.解构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>
  
<style>
</style>

解决方案可以使用 storeToRefs

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

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

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

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

6.Actions，getters

6.1.Actions（支持同步异步）

6.1.1.同步可直接调用
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>
 
<style>
 
</style>
6.1.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>
     <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>
 
<style>
 
</style>
6.1.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;
        }
    },

6.2.getters

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

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

    getters:{
       newPrice:(state)=>  `$${state.user.price}`
    },
6.2.2.普通函数形式可以使用this
    getters:{
       newCurrent ():number {
           return ++this.current
       }
    },
6.2.3.getters 互相调用
    getters:{
       newCurrent ():number | string {
           return ++this.current + this.newName
       },
       newName ():string {
           return `$-${this.name}`
       }
    },

pinia插件

pinia和 vuex 都有一个通病 页面刷新状态会丢失

我们可以写一个pinia 插件缓存他的值

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"
 
}))
MoXinXueWEB
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3中Pinia状态管理库学习笔记
03-14
Vue3中Pinia状态管理库学习笔记
Pinia 数据仓库配置之建仓库，使用仓库数据，Pinia 三种方法来修改仓库里的数据（直接修改，$patch，Actions），模块化思想
chuxialia的博客
09-22 2516
Pinia 数据仓库配置之建仓库，使用仓库数据，Pinia 三种方法来修改仓库里的数据（直接修改，$patch，Actions），模块化思想
pinia 的使用方法
岛泪的博客
01-21 679
1、在 mian.js 导入 pinia 里的 createPinia 函数。2、app.use 这个 createPinia 函数的返回值。3、创建一个 js 文件（该文件保存着共享的数据，共享的方法），惯例上会叫该 js 文件为。4、在文件里，从 pinia 里导入 defineStore 函数（该函数是定义 store 的函数）。5、在 defineStore 函数的第二个参数定义共享的数据和方法。
vue,pinia中store赋值，推荐使用computed,能做到响应，直接解构赋值做不到，备忘
最新发布
guohun01的博客
03-09 1100
然而在Vue3的响应式系统中，直接通过解构赋值提取的状态属性会失去响应性，也就是说，当。总结：在Vue3中，当你需要从store中获取并跟踪其状态变化时，推荐使用。这就是响应式编程的优势，它能确保UI总是与数据状态保持同步。返回的store对象中获取状态属性的方式进行了对比。函数创建计算属性，而不是通过解构赋值直接提取状态。这种方式通过解构赋值直接从store对象中提取出。仍然会保持初始值0，不会反映出最新的计算结果。语法的代码中，有两个关于如何从。的值发生改变时，解构出来的。这种方式使用了Vue3的。
三、Vue3中使用Pinia修改State的方法
xyphf的博客
11-14 1227
Vue3中使用Pinia修改State的方法
Vue3中使用pinia修改state值的五种方式
qq_52099965的博客
10-22 4177
Vue3中使用pinia修改state值的五种方式
Pinia学习-存储数据、修改数据以及持久化实现
Sky_MaoXiaoqi的博客
10-18 2002
Pinia学习-存储数据、修改数据以及持久化实现
Pinia基础及使用方法
Huangxianlong的博客
08-22 1138
简单来说，Pinia是vueX的新版本，我们都知道Vuex在Vue2中主要充当状态管理的角色，所谓状态管理，就是一个存储数据的地方，存放在Vuex中的数据在各个组件中都能访问到，它是Vue生态中重要的组成部分。在Vue3中，可以使用传统的Vuex来实现状态管理，也可以使用最新的pinia来实现状态管理。Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。Pinia和Vuex的作用是一样的，它也充当的是一个存储数据的作用，存储在pinia的数据也允许我们在各个组件中使用。
遇到bug，写pinia时：Cannot read properties of undefined (reading ‘startsWith‘）
mnbvcxz0101的博客
04-01 2339
pinia中遇到的问题：在Vue中导入写好的pinia模块cardStore.js,无法使用该模块的数据。
Pinia的使用和插件扩展
licongmingli的博客
11-22 502
本文对比了pinia与vuex的相同和差异以及使用场景，详细介绍了在Vue3中怎么使用pinia进行状态管理，介绍storeToRefs的使用以及使用插件自动化引入storeTorefs，使用插件持久化数据，storeToRefs与vue的toRefs有什么区别等。
第1章 封装Pinia状态管理库
08-14
第1章 封装Pinia状态管理库
Vue项目 Router路由，Pinia状态管理, Vuex状态管理 Vant List组件案例
11-16
Vue项目 Router路由，Pinia状态管理, Vuex状态管理 Vant List组件，NavBar组件，Swipe轮播组件，Axios请求拦截，页面布局案例
Pinia快速入门.pdf
09-06
本资源可以搭配博客Pinia快速入门适用更加，该文档为博客Pinia快速入门的pdf版，可以方便大家随时随地无网络观看，也可以助力大家可以更快速的掌握这个新的技术
15_Vue全家桶 - Pinia状态管理.pptx
01-25
15_Vue全家桶 - Pinia状态管理
Vue3+ts使用pinia传递数据,修改数据
wtd183833501176的博客
09-20 1509
毫无关系的组件之间的传值,使用pinia,实时修改pinia中想要传递的值
Pinia修改State的四种方式
chenhongcancan的博客
09-06 1723
缺点：不能直接修改原来的state，对state中的数组或对象不能增加或删除，只能创建新的对象进行赋值。在Pinia中有四种方式可以修改state，这四种各有利弊，可以根据使用场景决定使用哪种方式修改。优点：可以一次修改多个，可以修改原来的state，对state中的数组或对象可以使用方法修改。可通过$patch传函数参数修改, 可同时修改多个数据, 可对数组或对象使用添加/删除方法。缺点：不能一次修改多个，而且还需要引入storeToRefs，比第一种方法多了一点代码。优点：可以一次性修改多个。
使用pinia遇到的坑
weixin_43257360的博客
04-03 1398
我在app.vue中给router-view套了个spin，把这个spin绑定了一个state,然后在axios封装的js文件中进行修改，但是，在js文件中进行修改，vue文件无法实时监听state的属性变化。我之前Vue2的项目，这个事情都交给Vuex去做，这里，我就想当然的交给pinia去做了。最近在进行vue3的开发中，使用了pinia，在vue文件中引入就是响应式的，确实很好用，但是pinia也有一些缺点，这里分享一些我遇到的和pinia有关的坑以及解决办法。2.非Vue文件中使用无法响应式。
pinia 修改状态的几种方式
文摘资讯
08-11 2042
在深入了解核心概念之前，我们需要知道 Store 是使用defineStore()定义的，并且它需要一个唯一名称，作为第一个参数传递：import { defineStore } from 'pinia' const useStore = defineStore('storeId', { // 推荐使用 完整类型推断的箭头函数 state: () =&gt...
pinia使用过程中遇到的问题和疑问
qq_45032178的博客
07-18 1600
使用pinia时，如果仓库中state一开始存储的数据为空，那么我们直接使用仓库数据则会报错导致页面刷新为空。可以通过可选链运算符解决?当然我们可以在仓库的state的hospitalInfo对象中预先配置上我们需要的属性，值为空，这样直接用也不会保存。
pinia状态管理库的作用
03-26
Pinia是一个轻巧的状态管理库，可以帮助开发人员更好地管理和组织应用程序的状态。它提供了简单而强大的API，可以实现状态管理的各种功能，如状态变更、数据共享、状态持久化等。 具体来说，Pinia可以帮助开发人员...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值