首页 > 其他分享 >Vue — Vue3.0状态管理工具Pinia

Vue — Vue3.0状态管理工具Pinia

时间：2024-04-01 16:47:26浏览次数：26  
标签：count Vue const Pinia Vue3.0 pinia import ref

一、什么是Pinia?

Pinia 是一个专门为 Vue 3 设计的状态管理库。它的目标是提供一种简单、直观的方法来管理 Vue 应用的状态，同时充分利用 Vue 3 的响应式系统和组合式 API。

Pinia 主要特点包括：

  1. 基于 Vue 3：Pinia 是专门为 Vue 3 设计的状态管理库，充分利用了 Vue 3 的响应式系统和组合式 API。

  2. 使用 Composition API：Pinia 鼓励使用 Vue 3 的 Composition API 来定义和操作状态，这使得状态管理逻辑更加清晰和灵活。

  3. 零依赖：Pinia 是一个轻量级的状态管理库，没有任何依赖，这意味着你可以根据自己的需要选择是否引入额外的库。

  4. 插件化：Pinia 提供了丰富的插件生态，可以轻松地扩展其功能，比如可以与 DevTools 插件结合，方便调试状态变化。

  5. 类型安全：Pinia 充分利用 TypeScript 的支持，提供了类型安全的状态管理方案，让你在开发过程中更加放心。

  6. 服务端渲染支持：Pinia 提供了对服务端渲染的支持，使得在服务端渲染的 Vue 应用中也能够方便地使用状态管理。

总结：

1.提供了更加简单的API（去掉了mutation）

2.提供符合组合式风格的API（和Vue3.0的语法统一）

3.去掉了modules的概念，每一个store都是一个独立的模块

4.配合ts更加友好，童工可靠的类型判断

二、手动添加Pinia到Vue项目

1.使用Vite创建一个空的Vue项目

npm create vue@latest

2.按照官方文档安装Pinia

（1）安装Pinia

npm install pinia

（2）挂载Pinia（main.js）

import './assets/main.css'
import { createApp } from 'vue'
import {createPinia} from 'pinia' //导入Pinia
import App from './App.vue'
import router from './router'
 
const app = createApp(App) //创建Pinia实例
const pinia = createPinia()

app.use(router).use(pinia)//Pinia插件安装配置

app.mount('#app') //挂载

（3）使用Pinia

  • 创建Store

import { defineStore } from "pinia";
import { ref } from "vue";

//定义store
// defineStore(id,options) id:唯一标识符 options:配置对象



export const useCounterStore = defineStore('counter',()=>{
    //声明数据 state
    const count = ref(0)


    const message = ref('hello')


    //声明操作数据的方法 action 
    const addCount = ()=>count.value++
    const subCount = ()=>count.value--


    //声明基于数据派生的计算属性 getters


    const double = computed(()=>count.value*2)


    return {
        count,
        message,
        addCount,
        subCount,
        double
    }


 



    

  • 组件使用Store
    • 




<script setup>
import SonCom from '@/components/SonCom.vue';
import Son2Com from '@/components/Son2Com.vue'
import {useCounterStore} from '@/store/counter' //导入对应的store
const counterStore = useCounterStore() //保存着我们要使用的数据和方法
</script>

<template>
<div>
//使用方式

  <h3>APP {{ counterStore.count }} {{ counterStore.double }}</h3>

  <h3>APP {{ counterStore.message }}</h3>

  <SonCom></SonCom>
  <Son2Com></Son2Com>
</div>
</template>

<style scoped>

</style>




<script setup>
import {useCounterStore} from '@/store/counter'

const counterStore = useCounterStore()
</script>

<template>
<div>
  <h3>Son1 {{ counterStore.count }}
    
    <button  @click="counterStore.addCount">+</button></h3>

</div>
</template>

<style scoped>

</style>



    

  • action异步实现
    • 




import { defineStore } from "pinia";
import {ref} from 'vue'

export const useChannelStore = defineStore('channel',()=>{

    //声明数据
    const channelList = ref([])

    //声明修改数据的方法
    const getList = async ()=>{
       const res= await axiox.get('...')

       channelList.value = res.data
    }

    //声明getters


    //return
    return {
        channelList,
        getList
    }
})




<script setup>
import SonCom from '@/components/SonCom.vue';
import Son2Com from '@/components/Son2Com.vue'
import {useCounterStore} from '@/store/counter'
import {useChannelStore} from '@/store/channel'
const counterStore = useCounterStore()
const channelStore = useChannelStore()
</script>

<template>
<div>
  <h3>APP {{ counterStore.count }} {{ counterStore.double }}</h3>
  <h3>APP {{ counterStore.message }}</h3>

  <SonCom></SonCom>
  <Son2Com></Son2Com>

  <button @click="channelStore.getList">get List</button>
</div>
</template>

<style scoped>

</style>



3.storeToRefs方法使用


目的：解构数据之后还可以实现响应式数据


原因：因为解构赋值会将对象或数组中的值提取出来，赋值给新的变量，而这些新的变量并没有保持原始数据的响应式关系。换句话说，解构赋值会破坏原始数据的响应式性质。


原理：在Vue 3中，响应式系统通过reactive和ref两种API来实现。reactive用于创建一个响应式对象，而ref用于创建一个包装了普通JavaScript值的Ref对象。Ref对象具有value属性，用于访问其包装的值，并且在模板中使用时会自动解包。Pinia的storeToRefs函数的作用就是将Pinia store中的状态转换为Ref对象。它的原理大致如下：


    

  • 遍历Pinia store中的状态对象。
    • 

  • 对每个状态属性，使用ref函数将其包装为Ref对象。
    • 

  • 返回一个新的对象，该对象的每个属性都是之前状态对象中对应属性的Ref对象。
    • 




<script setup>
import {useCounterStore} from '@/store/counter'
import { storeToRefs } from 'pinia';
const counterStore = useCounterStore()
const {count,message} = storeToRefs(counterStore)
</script>
<template>
<div>
  <h3>APP {{ count }} </h3>
  <h3>APP {{ message }}</h3>

</div>
</template>



三.Pinia持久化


1.安装插件 pinia-plugin-persistedstate



npm install pinia-plugin-persistedstate



2.main.js挂载



import { createApp } from 'vue'
import {createPinia} from 'pinia' //导入Pinia
import App from './App.vue'
import router from './router'
import persistedStatePlugin from 'pinia-plugin-persistedstate' //导入Pinia持久化插件
 
const app = createApp(App) //创建Pinia实例
const pinia = createPinia()

app.use(router).use(pinia.use(persistedStatePlugin))//Pinia插件安装配置

app.mount('#app') //挂载



3.store仓库，persist:true 开启



import { defineStore } from "pinia";
import { computed, ref } from "vue";

//定义store
// defineStore(id,options) id:唯一标识符 options:配置对象

export const useCounterStore = defineStore('counter',()=>{
    //声明数据 state
    const count = ref(0)
    return {
        count,

},{
    persist : true ,//开启当前模块持久化
}
)



4.配置插件


    

  • storage：指定要使用的本地存储类型，默认为localStorage。可以是localStorage或者sessionStorage。
    • 

  • key：指定存储在本地存储中的键名，默认为'pinia-state'。
    • 

  • serializer：指定一个自定义的序列化器函数，用于序列化状态对象，默认为JSON.stringify。
    • 




import { defineStore } from "pinia";
import { computed, ref } from "vue";

//定义store
// defineStore(id,options) id:唯一标识符 options:配置对象

export const useCounterStore = defineStore('counter',()=>{
    //声明数据 state
    const count = ref(0)
    const message = ref('hello')
    return {
        count,
        message,
    }
},{
    // persist : true ,//开启当前模块持久化
    persist : {
        key : 'local-counter',
        storage : localStorage,//sessionStorage
        paths:['count'] ,//指定数据持久化
    }
}
)



 



标签：count,Vue,const,Pinia,Vue3.0,pinia,import,ref	

From： https://www.cnblogs.com/qinlinkun/p/18093691
      

      




      

      

        
相关文章

        

          
    
 
  • Vue tableList:＜any＞[]介绍
    letdata=reactive({tableList:<any>[]})；在这段代码中，tableList:[]表示tableList是一个数组，数组中的元素类型可以是任意类型（即TypeScript中的any类型）。[]中的尖括号<>是TypeScript中的类型断言语法，用于指定数组的元素类型。表示任意类型，即可以是任何......
     
  • Vue3创建空对象方法及推荐
    当使用{}时，我们实际上是在告诉TypeScript将空对象断言为任意类型（any），从而绕过了类型检查。这种做法会失去类型安全性，但在某些特定情况下可能是一种解决方案。以下是示例代码和说明：//使用<any>{}将空对象断言为any类型letobj=<any>{};//对空对象进行操作obj.f......
     
  • 基于vue的MOBA类游戏攻略分享平台的设计与实现|Springboot+Vue+ Mysql+Java+ B/S结构(
    本项目包含可运行源码+数据库+LW，文末可获取本项目的所有资料。现今，越来越多的人乐于选择一项合适的管理方案，但是普通用户往往受到管理经验地限制，这时MOBA类游戏攻略分享平台的崛起，大量游戏攻略进入人们生活，而MOBA类游戏攻略制无疑是游戏攻略管理的最好制度，在这样成功的管理模......
     
  • 前端开发中Vue3+Typescript使用装饰器出现错误一则
    今天开发公司项目时，使用TS装饰器遇到一个问题。当我写完装饰器代码后进入网页，控制台提示SyntaxError:Invalidorunexpectedtoken两个小时后的排查后发现是tsconfig.json的配置问题。如果tsconfig.json文件中没有指定target选项，TypeScript编译器会默认使用es5作......
     
  • Vue 中使用 flv.js 播放视频
    引入依赖npminstall--saveflv.js<template><div><videoautoplaycontrolswidth="100%"height="500"id="videoElement"></video></div></template><script>impor......
     
  • vue2生命周期
    什么是声明周期？生命周期概念是借鉴了软件工程和编程中普遍存在的概念，描述一个实体从开始到结束的整个过程。与植物学的生命周期相似。Vue的生命周期概念可以看作是对生物学生命周期概念的一种抽象借鉴和应用。生命周期阶段Vue实例有一个完整的生命周期，即从创建到销毁的过程......
     
  • Vue学习笔记69--activated + deactivated
    activated+deactivated注：生命周期学习可参考学习笔记33两个新的生命周期钩子作用：路由组件所独有的两个构造，用于捕获路由组件的激活状态具体名称：activated--路由组件被激活时触发+deactivated--路由组件失活时触发 示例如下所示：1<template>2<div>3<......
     
  • vue中路由跳转 切换tab页需要保存之前操作怎么办
    如图所示我需要草稿和新建流程页面切换草稿页面之前的操作（比如填写页面比如查询后页面等）仍保留使用vue中的keepalive组件 而对于若依系统菜单管理中自带是否缓存但注意一定要填写组件名称组件名称定义地址：......
     
  • vue 自定义tabs 样式的组件
    大家应该都用过tabs不同状态显示不同的列表 这种东西其实可以自己封装的其实是很简单的做一个这样简单的筛选组件 这样的跟tabs的效果一样上代码<template><divclass="switch-container"><divclass="box"><divclass="box-item"......
     
  • vue3中任意嵌套组件传参，provide与inject
    一般父组件向子组件传值，可以通过props (defineProps).但是多级嵌套组件使用props过于麻烦，推荐可以透传的provide和inject provide提供数据   inject注入数据App.vue代码<scriptsetup>import{ref,provide}from'vue'importSonfrom"./son.vue";constgreet......
     
    •            
          

        

      

    

    

      
赞助商

      




      

      
阅读排行

      

        
      

    

  





  
 
    
网站主页关于我们联系我们网站地图 

    
本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。 

    
Copyright © 2020-2023  IPS99  版权所有 IPS99