首页 > 资讯 > 前端开发 > JavaScript >Vue3中的pinia使用方法总结(建议收藏版)

153

分享到

Vue3中的pinia使用方法总结(建议收藏版)

vue3 pinia使用 vue3 pinia 2023-05-17 17:05:57 153人浏览独家记忆

摘要

目录1.pinia介绍2.pinia基本使用2.1注意Store获取到后不能解构，否则失去响应式3.修改state的数据4.getters的使用5. actions的使用6.数据的持

1.pinia介绍

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

pinia官方文档

Pinia 的优点

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

更多查看文档…

2.pinia基本使用

1.首先先安装依赖

npm install pinia

2.在main.js中引入pinia并创建容器挂载到根实例上

//引入stores暴露出的pinia的实例
import pinia from './stores'

createApp(App).use(pinia).mount('#app')

3.创建stores文件夹和index.js文件（这个文件以后基本不用管了）

import { createPinia } from "pinia";
const pinia = createPinia()
export default pinia

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

defineStore 是需要传参数的，

第一个参数是id，就是一个唯一的值，简单点说就可以理解成是一个命名空间.
第二个参数就是一个对象，里面有三个模块需要处理，第一个是 state，第二个是 getters，第三个是 actions。

//定义关于counter的store
import {defineStore} from 'pinia'


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

  	},

  	actions: {

  	}
})

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

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

5.然后再组件中使用：

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

运行效果：

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

2.一个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都能访问。

2.异步操作使用

在 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使用的文章就介绍到这了,更多相关Vue3中pinia使用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Vue3中的pinia使用方法总结(建议收藏版)

本文链接: https://www.lsjlt.com/news/211397.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

Vue3中的pinia使用方法总结(建议收藏版)

目录1.pinia介绍2.pinia基本使用2.1注意Store获取到后不能解构，否则失去响应式3.修改state的数据4.getters的使用5. actions的使用6.数据的持...

99+

2023-05-17

vue3 pinia使用 vue3 pinia
Linux常用命令总结（建议收藏）

文章目录一、文件管理1、cat：查看文件内容案例1：输出内容+行数 2、chmod：是控制用户对文件的权限的命令案例1：：将user文件修改成用户、组、其他用户都可以读写可执行的权限 3、diff：用于比较文件的差...

99+

2023-08-25

linux 服务器 unix
Vue3中操作ref的四种使用方式示例代码(建议收藏)

目录前言通过ref直接拿到dom引用适用场景示例代码通过父容器的ref遍历拿到dom引用适用场景示例代码通过:ref将dom引用放到数组中适用场景示例代码通过子组件emit传递ref...

99+

2023-05-16

Vue3操作ref Vue3 ref使用
31个必备的Python字符串方法，建议收藏！

字符串是Python中基本的数据类型，几乎在每个Python程序中都会使用到它。1、Slicingslicing切片，按照一定条件从列表或者元组中取出部分元素（比如特定范围、索引、分割值）s = ' hello ' s = s[:] pri...

99+

2023-05-14

Python 字符串
【Java】Java中解决跨域问题的几种方法（建议收藏）

文章目录背景一、什么是跨域？为什么会出现跨域二、Java实现跨域方式2.1、返回新的 CorsFilter(全局跨域)2.2、重写 WebMvcConfigurer(全局跨域)2.3、使用注解 (局部跨域)2.4、手动设置响应头(...

99+

2023-08-30

java
详谈mysql各种常用操作数据表结构的用法【建议收藏】

文章目录一.修改系列1.修改表名：2.修改表的注释：3.修改表字段名：4.修改表字段的数据类型：5.修改表字段的数据类型长度：6.修改表字段的默认值：7.修改表字段的注释：二.创建系列...

99+

2023-10-08

mysql
vue3 setup语法糖各种语法新特性的使用方法(vue3+vite+pinia)

目录一、背景二、vue3语法的使用2.1. 父子通信props2.2. EventBus2.3. 计算属性computed2.4. pinia状态管理器的使用2.4.1. 模块化2....

99+

2024-04-02
vue3中组件传值的多种方法总结

目录第一种: props和 emitsetup语法实现父向子传值第三种: provide和inject 实现后代组件传值第四种: v-model 以及动态属性绑定总结第一种: pro...

99+

2023-01-06

vue3.0 组件传值 vue三种传值方式 vue3组件传值
Python 中enum的使用方法总结

目录1.为什么要用enum，什么时候使用enum2.enum的定义/声明3.遍历成员4.继承Enum的类中定义方法5.将Enum类属性的值定义为函数或方法6.自定义异常处理7.enu...

99+

2024-04-02
vue3使用svg图标的多种方式总结

目录方式1使用在线链接访问封装的写法(上面的代码写着太重复下面进行封装)总结方式1使用在线链接访问在iconfont找到自己的项目的图标选择Symbol获取在线链接 ...

99+

2023-03-24

vue中使用svg图标 vue3 svg vue中svg图标怎么使用
Android onCreateOptionsMenu的使用方法总结

Android onCreateOptionsMenu的使用方法总结任何一款软件都少不了对“菜单”的使用。在Android下，每一个activity都捆绑了一个Menu，要想定义和使用菜单，都必须在Activity下进行操作，复写onCre...

99+

2023-05-30

android oncreateoptionsmenu roi
Android WebView的使用方法总结

Android WebView的使用方法 Android app打开H5页一般要实现如下需求：打开指定url网页；2、点击链接可以跳转到下一页，并更新标题；3、按back键或左箭头可以返回上一页；4、当webview...

99+

2023-05-30

android webview roi
bootstrap Table的使用方法总结

本文为大家分享了bootstrap Table的使用方法，供大家参考，具体内容如下官网资料效果图：案例： html  <table...

99+

2024-04-02
猿创征文｜mysql中show的常用命令-Navicat篇【建议收藏】

文章目录一.mysql show 命令1.查看表信息2.查看表信息3.显示表中列名称4.显示create database 语句是否能够创建指定的数据库5.显示create table 语句是否能够创建指定的表6.显示当前使用或...

99+

2023-08-19

mysql
使用java springboot设计实现的图书管理系统（建议收藏）

目录前言背景意义数据库设计功能截图代码实现前言随着网络技术的发展、计算机应用水平广泛提高，原来系统的时效性、数据的正确性、操作的方便性上都存在不足，已影响到系统的正常使用。经过考察...

99+

2024-04-02
vue3组件通信的方式总结及实例用法

vue3组件通信方式为以下几种 props $emit $expose / ref $attrs v-model provide /...

99+

2024-04-02
Android 布局中的android:onClick的使用方法总结

Android 布局中的android:onClick的使用方法总结Android布局中的 android:onClick=“...”属性设置点击时从上下文中调用指定的方法。该属性值和要调用的方法名称完全一致。一般在Activity定义符合...

99+

2023-05-30

android onclick roi
Vite创建Vue3项目及Vue3使用jsx的方法

使用 yarn：yarn create @vitejs/app使用 npm：npm init @vitejs/app1. 输入项目名称这里输入我们的项目名称：vite-vue32. 选择框架这里选择我们需要集成的框架：vuevanilla：...

99+

2023-05-22

Vue3 vite jsx
vue3中axios的使用方法

在Vue 3中使用axios发送HTTP请求的方法与Vue 2中基本相同。首先，需要安装axios库： npm install axios 然后，在Vue组件中引入axios： import axio...

99+

2023-10-12

前端
JavaScript中Object的常用方法总结

目录1、Object.keys方法2、Object.values()方法3、Object.create()4、Object.hasOwnProperty()方法5、Object.ge...

99+

2023-02-10

JavaScript Object常用方法 JavaScript Object方法 JavaScript Object