vue3状态管理工具 pinia的使用

pinia 是一个轻量级的状态管理库，属于 vue3 生态圈新的成员之一，也可以把它看做 vuex5，同时支持 vue2 和 vue3，模块化的设计让它的结构十分地清晰明了
安装

npm install pinia --save

引入
在 main.ts中引入

import { createApp } from 'vue'
import { createPinia } from 'pinia'//引入pinia

const app = createApp(App)
app.use(createPinia())

使用方法1
例子：在src/stores下新建一个myStore.ts文件

//myStore.ts
import { defineStore } from 'pinia'//
//使用defineStore()来定义一个 store
//注意：defineStore中的第一个参数需要在你整个应用当中保持唯一。
//myStore是定义的store的id名是唯一的
//useStore为store暴露出去供引入使用的名字
export const useStore = defineStore('myStore', {state: () => {return {count: 0}},getters: {count() {return this.count}},actions: {increment() {this.count++}}
})

注意：defineStore中的第一个参数需要在你整个应用当中保持唯一
这种写法和我们之前使用的 vuex 简直一模一样，区别就是 pinia 将mutations方法取消了更方便我们使用。

使用方法2：下面是Vue3 的 setup 语法的写法更简单方便

import { defineStore } from 'pinia'

export const useStore= defineStore('myStore', () => {const count = ref(0)function increment() {count.value++}
   //返回需要暴露的属性和方法return { count, increment }
})

页面中使用

<script lang="ts" setup>import { useStore } from '@/stores/myStore'
const counter = useStore()function myFun(){//counter.count = 1//这里可以直接修改数据//counter.$patch((state)=>{//如果state数据多可以使用$patch方法批量修改数据//state.count = 200//})counter.increment()//使用定义的方法修改数据的值，可以传参数}
</script>
<template><p>直接使用：{{counter.count}}</p><div @click="myFun">{{ counter.count }}</div>
</template>

最后:如果state中定义的数据有多个，可以使用storeToRefs解构赋值

const counter = useStore()
const { count } = counter//这里直接解构赋值
function myFun(){counter.increment()
}
<div @click="myFun">{{ count }}</div> //这里可以正常显示数据，调用方法无法修改状态值

注意：使用上述直接解构赋值，数据可以正常显示但是点击myFun方法 count 的值不会变化，只会维持它的初始值不变，普通的解构是被禁止使用必须使用storeToRefs方法来实现

import { storeToRefs } from 'pinia'//引入方法storeToRefs
const counter = useStore()
const { count } = storeToRefs(counter)//这里使用storeToRefs解构赋值
function myFun(){counter.increment()
}
<div @click="myFun">{{ count }}</div> //可以正常使用功能，调用方法可以修改状态值

vue3状态管理工具 pinia的使用相关推荐

vue3 状态管理工具 pinia 使用
1.安装pinia npm install pinia --save 2.创建 Store 新建一个 store 文件,创建 index.ts import { createPinia } from ...
Vue新一代状态管理工具—Pinia—都2023年了，快学起来吧！
Pinia 基本介绍 Pinia 是 Vue.js 的轻量级状态管理库官方网站:https://pinia.vuejs.org/ 中文文档: https://pinia.web3doc.top/in ...
Vue最新状态管理工具Pinia——彻底搞懂Pinia是什么
Pinia从了解到实际运用--彻底搞懂什么是Pinia 知识回调(不懂就看这儿!) 场景复现什么是pinia pinia相比vuex的优势为什么要使用pinia? 基本示例知识回调(不懂就看这儿 ...
vue3状态管理模式 Pinia
状态管理库 Pinia是Vue的专属状态管理库,它允许你跨组件或页面共享状态 1:安装与使用pinia 1.1 安装语法:npm install pinia 1.2 创建一个pinia(根存储)并将其 ...
全新的 Vue3 状态管理工具：Pinia
大家好,我是若川.最近组织了源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列> ...
Vue3状态管理库——Pinia
什么是 Pinia Pinia (西班牙语中的菠萝),本质上依然是一个状态管理的库,用于跨组件.页面进行状态共享. pinia 与 vuex 的区别: 更友好的TypeScript支持,Vuex之前对 ...
在vue项目中引用vuex状态管理工具
在vue项目中引用vuex状态管理工具一.vuex是什么? 二.使用步骤 1.引入库 2.在main.js文件引入配置 3.配置store/index.js文件 4.获取state数据 5.获取ge ...
[译] ⚛ React 状态管理工具博物馆
原文地址:⚛ The React State Museum: ⚡️View the hottest state management libs for React 原文作者:Gant Laborde ...
可能是基于 Hooks 和 Typescript 最好的状态管理工具
接上一篇:我理想中的状态管理工具之前说,对于我个人来而言,理想的状态管理工具只需同时满足两个特点: 简单易用,并且适合中大型项目完美地支持 Typescript 未能找到一个完美满足这两点的,所以 ...

vue3状态管理工具 pinia的使用

vue3状态管理工具 pinia的使用

vue3状态管理工具 pinia的使用相关推荐

最新文章

热门文章