Vue3中的pinia使用(收藏版)

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

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

vue3-pinia的使用《三》,vue,vue.js,javascript,webpack

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函数直接操作。

运行结果:

vue3-pinia的使用《三》,vue,vue.js,javascript,webpack
解决方案:
pinia提供了一个函数storeToRefs解决。引用官方API storeToRef 作用就是把结构的数据使用ref做代理

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

const {count} = storeToRefs(counterStore)

现在数据都是响应式的了

vue3-pinia的使用《三》,vue,vue.js,javascript,webpack

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
}

效果:点击也修改了
vue3-pinia的使用《三》,vue,vue.js,javascript,webpack

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

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

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

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

第三种方法:$state 方式(这个是替换的方式。)这个基本不用,这里就不多说。可以看查阅文档。

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

新增一个重置按钮:

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

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

vue3-pinia的使用《三》,vue,vue.js,javascript,webpack

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>

运行效果:
vue3-pinia的使用《三》,vue,vue.js,javascript,webpack

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

  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:

vue3-pinia的使用《三》,vue,vue.js,javascript,webpack

vue3-pinia的使用《三》,vue,vue.js,javascript,webpack

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>

运行结果:
vue3-pinia的使用《三》,vue,vue.js,javascript,webpack

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

vue3-pinia的使用《三》,vue,vue.js,javascript,webpack
这样就在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
vue3-pinia的使用《三》,vue,vue.js,javascript,webpack

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

vue3-pinia的使用《三》,vue,vue.js,javascript,webpack

  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:[] // 需要缓存键 
  }
})

效果:

vue3-pinia的使用《三》,vue,vue.js,javascript,webpack

文章有写的不当的地方,欢迎指正修改。如果感觉文章实用对你有帮助,欢迎点赞收藏和关注,你的点赞关注就是我动力,大家一起学习进步。文章来源地址https://www.toymoban.com/news/detail-824695.html

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

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

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

相关文章

  • pinia在vue3中的使用

    总结: 在store文件夹中建一个pinia的文件userStore.js 1.要想使用pinia必须先引入defineStore  这里我们使用es6的模块化语法导出的   import { defineStore } from \\\'pinia\\\' 2.然后使用export const useUserStore = defineStore(\\\'user\\\',{})   defineStore 方法有两个参数,第一个参数是模块化名字(也就相当于身份

    2024年02月15日
    浏览(35)
  • vue3中的pinia

    pinia官网 main.ts中引入 创建store文件夹,创建index.ts App.vue中引入 store  是一个用 reactive  包裹的对象,这意味着不需要在getter 之后写 .value ,但是,就像 setup  中的 props  一样, 我们不能对其进行解构 为了从 Store 中提取属性同时保持其响应式,您需要使用 storeToRefs() 。 它将

    2024年02月10日
    浏览(36)
  • Vue3中使用pinia

    目录 1、安装:npm install pinia 2、创建store文件并配置内部的index.js文件 3、main.js文件中配置 4、组件使用 4-1、 store.$reset()    4-2 store.$patch  5.订阅修改 6.Getter 7、Actions 效果图  点击按钮,界面变化  说明成功修改了pinia里面的数据,且界面刷新证明这种直接修该pinia数据的方式

    2024年02月07日
    浏览(38)
  • vue3项目中使用pinia

    前言: 官网地址 https://pinia.vuejs.org/zh/ 中文文档 https://pinia.web3doc.top/ pinia    作为Vue.js 状态管理库 类型安全、可扩展性以及模块化设计。 甚至让你忘记正在使用的是一个状态库。 优点:   优点 dev-tools 支持 跟踪动作、突变的时间线 Store 出现在使用它们的组件中 time travel

    2023年04月26日
    浏览(44)
  • vue3探索——pinia高阶使用

    以下是一些 Pinia 的其他高阶功能: storeToRefs() :响应式解构仓库,保证解构出来的数据是响应式的数据。 状态持久化 :Pinia 并没有内置的状态持久化功能,但你可以使用第三方库或自定义插件来实现状态的持久化。例如,你可以使用  localStorage  或  sessionStorage  来将状态

    2024年02月08日
    浏览(34)
  • 前端开发小技巧 - 【Vue3 + TS】 - 在 TS + Vue3 中使用 Pinia,实现 Pinia 的持久化,优化Pinia(仓库统一管理)

    ts 中使用 pinia 和 Vue3 基本一致,唯一的不同点在于,需要根据接口文档给 state 标注类型,也要给 actions 标注类型; 以下都是 组合式API 的写法, 选项式API 的写法大家可以去官网看看; Pinia; 持久化插件 - pinia-plugin-persistedstate; 目标文件: src/types/user.d.ts (这里以 user.d.t

    2024年04月09日
    浏览(52)
  • Vue3 store+pinia 基本使用

    pinia是一个 状态管理的库 ,用于 跨组件、页面进行状态共享 (这和Vuex、Redux一样),用起来像组合式API Pinia和Vuex有什么区别 1、PInia的最初是为了探索Vuex的下一次迭代会是什么样子,结合了Vuex核心团队讨论中的许多想法; 2、最终,团队意识到Pinia已经实现了Vuex5中大部分内

    2024年02月07日
    浏览(51)
  • vue3使用pinia和pinia-plugin-persist做持久化存储

    插件和版本 src/store/home.js(可直接复制) 参考文章1 参考2 参考3

    2024年02月13日
    浏览(39)
  • 在vue3中使用pinia完整流程图文

    使用vite创建好一个vue3项目,开发语言选择ts 使用 npm i pinia -s 安装最新版本的pinia 这里我的版本安装的是 2.1.4 1.在main中注册pinia 2.在store中创建index.ts和store-name.ts文件 index.ts内容如下: store-name.ts内容如下: app.vue文件的内容如下: 页面输出如下内容则一次简单的pinia的调用完

    2024年02月10日
    浏览(42)
  • 使用 Vite + Vue3 + Element-Plus + Pinia + Ts 搭建 Vue3 项目

    Vite 需要 Node.js 版本 14.18+,16+。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。 首先 npm 输入: Project name :项目名称 Select a framework :选择一个框架 Select a variant :选择 ts 或者 js 输入项目名称后选择 vue 选择

    2024年02月09日
    浏览(59)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包