菜单 搜索
首页 前端知识 Vue3中的pinia使用（收藏版）

Vue3中的pinia使用（收藏版）

2024-02-06 15:02:07 前端知识 前端哥 828 878 我要收藏

1.pinia介绍

💂 个人网站:【紫陌】【笔记分享网】
💅 想寻找共同学习交流、共同成长的伙伴，请点击【前端学习交流群】

pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。就是和vuex一样的实现数据共享。
依据Pinia官方文档，Pinia是2019年由vue.js官方成员重新设计的新一代状态管理器，更替Vuex4成为Vuex5。
Pinia 目前也已经是 vue 官方正式的状态库。适用于 vue2 和 vue3。可以简单的理解成 Pinia 就是 Vuex5。也就是说， Vue3 项目，建议使用Pinia。

pinia官方文档

Pinia 的优点

  1. pinia 符合直觉，易于学习。
  2. pinia 是轻量级状态管理工具，大小只有1KB.
  3. pinia 模块化设计，方便拆分。
  4. pinia 没有 mutations，直接在 actions 中操作 state，通过 this.xxx 访问响应的状态，尽管可 以直接操作 state，但是还是推荐在 actions 中操作，保证状态不被意外的改变。
  5. store 的 action 被调度为常规的函数调用，而不是使用 dispatch 方法或者是 MapAction 辅助函数，这是在 Vuex 中很常见的。
  6. 支持多个 store。
  7. 支持 Vue devtools、SSR、webpack 代码拆分。

更多查看文档…

2.pinia基本使用

  1. 首先先安装依赖
npm install pinia
  1. 在main.js中引入pinia并创建容器挂载到根实例上
//引入stores暴露出的pinia的实例
import pinia from './stores'

createApp(App).use(pinia).mount('#app')
  1. 创建stores文件夹和index.js文件（这个文件以后基本不用管了）
import { createPinia } from "pinia";

const pinia = createPinia()

export default pinia
  1. 在stores文件夹下创建counter.js文件。这个文件就是存有关counter相关的数据。（类似vuex的模块化）

defineStore 是需要传参数的，

  • 第一个参数是id，就是一个唯一的值，简单点说就可以理解成是一个命名空间.
  • 第二个参数就是一个对象，里面有三个模块需要处理，第一个是 state，第二个是 getters，第三个是 actions。
//定义关于counter的store
import {defineStore} from 'pinia'

/*defineStore 是需要传参数的，其中第一个参数是id，就是一个唯一的值，
简单点说就可以理解成是一个命名空间.
第二个参数就是一个对象，里面有三个模块需要处理，第一个是 state，
第二个是 getters，第三个是 actions。
*/
const useCounter = defineStore("counter",{
    state:() => ({
        count:66,
    }),
    
    getters: {

  	},

  	actions: {

  	}
})

//暴露这个useCounter模块
export default useCounter

注意：返回的函数统一使用useXXX作为命名方案，这是约定的规矩。例如上面的useCounter

  1. 然后再组件中使用：
<template>
	<!-- 在页面中直接使用就可以了 不用 .state-->
  <div>展示pinia的counter的count值：{{counterStore.count}}</div>

</template>

<script setup>
// 首先需要引入一下我们刚刚创建的store
import useCounter from '../stores/counter'
// 因为是个方法，所以我们得调用一下
const counterStore = useCounter()

</script>

注意：在模板使用 ，不用和vuex一样还要.state,直接点state里面的K

运行效果： 可以用vue3的调试工具看pinia

2.1注意Store获取到后不能解构，否则失去响应式

案例需求，点击按钮加一：
一个不解构，一个不解构看看区别。

<template>
  <div>展示pinia的counter的count值：{{counterStore.count}}</div>
  <div>展示解构出来的pinia的counter的count值：{{count}}</div>
  <button @click="addCount">count+1</button>
</template>

<script setup>
	import useCounter from '../stores/counter'
	
	const counterStore = useCounter()
	
	const {count} = counterStore
	
	function addCount(){
	  //这里可以直接操作count，这就是pinia好处，在vuex还要commit在mutaitions修改数据
	  counterStore.count++
	}
<script/>

在 vuex 里面是坚决不允许这样子直接操作 state 数据的，pinia是可以的，看看上面的addCount函数直接操作。

运行结果：

在这里插入图片描述
解决方案：
pinia提供了一个函数storeToRefs解决。引用官方API storeToRef 作用就是把结构的数据使用ref做代理

import {storeToRefs} from 'pinia'
const counterStore = useCounter()

const {count} = storeToRefs(counterStore)

现在数据都是响应式的了

在这里插入图片描述

3.修改state的数据

重新新建一个user模块
stores/user.js

//定义一个关于user的store
import {defineStore} from 'pinia'

const useUser = defineStore("user",{
    state:()=>({
        name:"紫陌",
        age:18
    })
})

export default useUser

组件中修改数据：
**第一种方法：**点击按钮修改数据，这种方法是最直接的修改数据

<template>
    <div>
        <h2>名字是：{{name}}</h2>
        <h2>年龄是：{{age}}</h2>
        <button @click="updateStore">修改Store数据</button>
    </div>


</template>

<script setup>
import useUser from '../stores/user'
import {storeToRefs} from 'pinia'

const userStore = useUser()

const {name,age} = storeToRefs(userStore)

function updateStore(){
    //一个个的修改状态
    userStore.name = "zimo"
    userStore.age = 20
}

效果：点击也修改了
在这里插入图片描述

第二种方法：$patch函数修改

function updateStore(){
    //一个个的修改状态
    // userStore.name = "zimo"
    // userStore.age = 20

    // 一次性修改多个状态
    userStore.$patch({
        name:"zimo",
        age:20
    })
}

这个方式也可以，效果一样。

第三种方法：$state 方式（这个是替换的方式。）这个基本不用，这里就不多说。可以看查阅文档。

第四种方法：$reset()函数是重置state数据的

新增一个重置按钮：

function resetStore(){
    userStore.$reset()
}

运行结果：点击了修改数据按钮之后在点重置按钮就恢复原始的数据。

在这里插入图片描述

4.getters的使用

getters 类似于 vue 里面的计算属性，可以对已有的数据进行修饰。不管调用多少次，getters中的函数只会执行一次，且都会缓存。

  1. 最基本的使用
    在counter模块演示了，counter模块：
//定义关于counter的store
import {defineStore} from 'pinia'

const useCounter = defineStore("counter",{
    state:() => ({
        count:66,
    }),

    getters:{
        //基本使用
        doubleCount(state) {
            return state.count * 2
        },
    },
})

//暴露这个useCounter模块
export default useCounter

组件中：

  <div>
        <h1>getters的使用</h1>
        <h2>doubleCount:{{counterStore.doubleCount}}</h2>
    </div>

运行效果：
在这里插入图片描述

这样就是最基本的使用了。

  1. 一个getter引入另外一个getter

couter模块：

getters:{
        //基本使用
        doubleCount(state) {
            return state.count * 2
        },
        //一个getter引入另外一个getter
        doubleCountAddTwo(){
            console.log(this);
            //this.是store实例
            return this.doubleCount + 2
        }
    },

组件中使用：

<div>
        <h1>getters的使用</h1>
        <h2>doubleCount:{{counterStore.doubleCount}}</h2>
        <h2>doubleCountAddTwo:{{counterStore.doubleCountAddTwo}}</h2>
    </div>

运行效果并且看看打印的this：

在这里插入图片描述

在这里插入图片描述

3.getters中用别的store中的数据

在counter模块中拿user模块的store数据。

count模块：

//定义关于counter的store
import {defineStore} from 'pinia'
import useUser from "./user"
const useCounter = defineStore("counter",{
    state:() => ({
        count:66,
    }),

    getters:{
        //基本使用
        doubleCount(state) {
            return state.count * 2
        },
        //一个getter引入另外一个getter
        doubleCountAddTwo(){
            console.log(this);
            //this.是store实例
            return this.doubleCount + 2
        },
        //getters中用别的store中的数据
        showMessage(state){
            console.log(state);
            console.log(this)
            //获取user信息，拿到useUser模块
            const userStore = useUser()
            //拼接信息
            return `name：${userStore.name}--count:${state.count}`
        }
    },
})

//暴露这个useCounter模块
export default useCounter

注意：要引入user模块

组件中：

 <div>
        <h1>getters的使用</h1>
        <h2>doubleCount:{{counterStore.doubleCount}}</h2>
        <h2>doubleCountAddTwo:{{counterStore.doubleCountAddTwo}}</h2>
        <h2>showMessage:{{counterStore.showMessage}}</h2>
    </div>

运行结果：
在这里插入图片描述

注意：我打印了this和store，他们都是当前这这个模块的实例

在这里插入图片描述
这样就在counter模块拿到了user模块的数据了。

5. actions的使用

actions 是可以处理同步，也可以处理异步，同步的话相对来说简单一点.actions类似methods

  1. 先看同步使用：
    counter模块使用：
    在actions定义了两个函数一个加一的函数，一个加20的函数。
//定义关于counter的store
import {defineStore} from 'pinia'
const useCounter = defineStore("counter",{
    state:() => ({
        count:66,
    }),

    actions:{
        increment(state){
            //actions没有state，只能通过this拿store，这里打印
            console.log(state);
            this.count++
        },
        incrementNum(num){
            this.count += num
        }
    }
})

//暴露这个useCounter模块
export default useCounter

组件中：
actions函数在组件中使用

	<div>
        <h1>actions的使用</h1>
        <h2>count的事值：{{counterStore.count}}</h2>
        <button @click="changeState">count+1</button>
        <button @click="incrementNum">count+20</button>
      </div>

<script setup>
	import useCounter from '../stores/counter'
	const counterStore = useCounter()
	
	function changeState(){
	  counterStore.increment()
	}
	function incrementNum(){
	  counterStore.incrementNum(20)
	}
</script>

运行结果并且看看state是什么

初始值是66，点了一次加1和点了一次加20
在这里插入图片描述

注意：state的结果是undefined 所以actions只能通过this访问store。getter的话state和this都能访问。

在这里插入图片描述

  1. 异步操作使用

在 actions 处理异步的时候呢，我们一般是与 async 和 await 连用。
counter模块： 这里大致演示，具体还看自己怎么使用。

    state:() => ({
        count:66,
        list:[]
    }),
	actions:{
        //大概演示这个异步流程
        async axiosData(){
            const res = await fetch("http://-----------------")
            if(code ==200){
                //收到数据保存到store
                this.list = res.data.list
                return "ok"
            }
        }

    }

组件使用：

<template>
      <!-- 遍历store的数据 -->
      <div v-for="item in counterStore.list"></div>
</template>

<script setup>
import useCounter from '../stores/counter'
const counterStore = useCounter()

counterStore.axiosData().then(res =>{
  console.log("成功",res);
})
</script>

就这样可以啦！！！

是不是比vuex简洁很多。。。

6.数据的持久化

pinia支持扩展插件

我们想实现数据持久化

npm i pinia-plugin-persist

export const useUserStore = defineStore({
  state () {
    return {
      count: 0,
      num: 101,
      list: [1, 2, 3, 4 ]
    }
  },
  persist: {
    enabled: true, // 开启缓存  默认会存储在本地localstorage
    storage: sessionStorage, // 缓存使用方式
    paths:[] // 需要缓存键 
  }
})

效果：

在这里插入图片描述

文章有写的不当的地方，欢迎指正修改。如果感觉文章实用对你有帮助，欢迎点赞收藏和关注，你的点赞关注就是我动力，大家一起学习进步。

转载请注明出处或者链接地址：https://www.qianduange.cn//article/1440.html
标签
webpack
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

【002JavaScript - 测试 jQuery】使用jQuery进行JavaScript测试

2024-02-20 10:02:37

jQuery_10 jQuery中的网路请求(AJAX)

2024-02-20 10:02:36

jQuery的get方法及其参数详解

2024-02-20 10:02:36

Ajax基础（应用场景｜jquery实现Ajax｜注意事项｜Ajax发送json数据｜Ajax携带文件数据）

2024-02-20 10:02:22

Javascript jQuery简介

2024-02-20 10:02:10

JQuery下载和一些语法

2024-02-20 10:02:09

记录 jquery 循环删除多个数组元素

2024-02-20 10:02:07

JQuery入门基础

2024-02-20 10:02:06

jQuery UI sortable()实现拖动排序

2024-02-20 10:02:06

按钮设置为禁用状态

2024-02-20 10:02:05

大家推荐的文章
1

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
2

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
3

移动端css布局大全

2024-02-06 15:02:421000
4

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
5

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
6

HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999
7

web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999
8

尚硅谷css3笔记

2024-02-13 10:02:44998
9

如何利用浏览器测试跨域

2024-02-11 10:02:28998
10

html生日祝福网页制作（粉色主题

2024-01-30 20:01:45997

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！