vue3新一代状态管理库 Pinia

简介: vue3新一代状态管理库 Pinia

Pinia优势
Pinia是一个全新的Vue状态管理库,是Vuex的代替者,尤雨溪强势推荐
1.Vue2 和 Vue3 都能支持
2.抛弃传统的 Mutation ,只有 state, getter 和 action ,简化状态管理库
3.不需要嵌套模块,符合 Vue3 的 Composition api,让代码扁平化
4.TypeScript支持

Pinia 基本使用
初始化项目: npm init vite@latest
安装Pinia: npm i pinia

挂载Pinia

import {
    createPinia } from 'pinia'
const pinia = createPinia()
createApp(App).use(pinia)
创建Store
import {
    defineStore } from "pinia";

export const useStore = defineStore('main', {
   
  state: () => {
   
    return {
   
      msg: 'hello world hhhh',
      Number: 1
    }
  },
  getters: {
   },
  actions: {
   }
})

使用Store

<template>
  <div>HelloWorld</div>
  <div>{
   {
   store.msg}}</div>
</template>

<script setup lang="ts">
import {
    useStore } from "../index";
const store = useStore()
</script>

解构Store
当store中的多个参数需要被使用到的时候,为了更简洁的使用这些变量,我们通常采用结构的方式一次性获取所有的变量名

ES传统方式解构(能获取到值,但是不具有响应性)

<template>
  <div>HelloWorld</div>
  <div>{
   {
    store.msg }}</div>
  <div>{
   {
    number }}</div>
  <button @click="number++">+++</button>
</template>

<script setup lang="ts">
import {
    useStore } from "../index";
const store = useStore();
const {
    number } = store;
</script>

<style scoped></style>
Pinia解构方法:storeToRefs
<template>
  <div>HelloWorld</div>
  <div>{
   {
    store.msg }}</div>
  <div>{
   {
    number }}</div>
  <button @click="number++">+++</button>
</template>

<script setup lang="ts">
import {
    storeToRefs } from "pinia";
import {
    useStore } from "../index";
const store = useStore();
// const { number } = store;
const {
    number } = storeToRefs(store);
</script>

<style scoped></style>

多条数据修改
通过基础数据修改方式去修改多条数据也是可行的,但是在 pinia 官网中,已经明确表示$patch 的方式是经过优化的,会加快修改速度,对性能有很大好处,所以在进行多条数据修改的时候,更推荐使用$patch

$patch 方法可以接受两个类型的参数,函数 和 对象
$patch + 对象
$patch + 函数: 通过函数方式去使用的时候,函数接受一个 state 的参数,state 就是 store 仓库中的 state

const change = () => {
   
  store.$patch({
   
    msg: 'hhhhhhhhhhhh',
    number: store.number + 100
  })
}

const change1 = () => {
   
  store.$patch((state)=> {
   
    state.msg = 'hhhhhhhhhhhh'
    state.number = state.number + 100
  })
}

Pinia中的Getters
Pinia 中的 getter 和 Vue 中的计算属性几乎一样,在获取 State值之前做一些逻辑处理getter 中的值有缓存特性,如果值没有改变,多次使用也只会调用一次添加 getter方法

getters: {
   
    addNumber(state) {
   
      return state.number * state.number1
    }
  },

<div>{
   {
   store.addNumber}}</div>
<div>{
   {
   store.addNumber}}</div>
<div>{
   {
   store.addNumber}}</div> //多次调用也只会执行一次

getter 中不仅可以传递 state 直接改变数据状态,还可以使用 this 来改变数据,但要说明对应类型

getters: {
   
    addNumber():any {
   
      // return state.number * state.number1
      return this.msg
    }
  },

store之间的相互调用
在 Pinia 中,可以在一个 store 中 import 另外一个 store ,然后通过调用引入 store 方法的形式,获取引入 store 的状态

export const useStore = defineStore('use', {
   
  state: () => {
   
    return {
   
      msg: 'hello world hhhhxxx',
      number: 2,
      number1: 3
    }
  },
  getters: {
   
    addNumber():any {
   
      // return state.number * state.number1
      return this.msg
    }
  },
  actions: {
   

  }
})

export const mainStore = defineStore('main', {
   
  state: () => {
   
    return {
   
      msg: 'hello world hhhh',
      number: 1
    }
  },
  getters: {
   
    addNumber() {
   
      console.log(useStore().msg);
    }
  },
  actions: {
   }
})

总结
总得来说,Pinia 就是 Vuex 的替代版,可以更好的兼容 Vue2,Vue3以及TypeScript。在Vuex的基础上去掉了 Mutation,只保留了 state, getter和action。Pinia拥有更简洁的语法, 扁平化的代码编排,符合Vue3 的 Composition api

相关文章
|
9天前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
2天前
|
存储 JavaScript
Vue 状态管理工具vuex
Vue 状态管理工具vuex
|
6天前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能,解决了Vue 2中响应式系统的一些局限性,同时在性能方面也有一定的提升,为开发者提供了更好的开发体验和性能保障。
19 7
|
7天前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
25 3
|
6天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何?
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升,从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等,使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
24 1
|
6天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定,无论是使用内置的指令如 `v-model`,还是通过自定义事件或自定义指令,都能够方便地实现数据与视图之间的双向交互,满足不同场景下的开发需求。
25 1
|
8天前
|
前端开发 JavaScript
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
|
9天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
12天前
|
JavaScript API
vue3知识点:ref函数
vue3知识点:ref函数
25 2
|
12天前
|
JavaScript 前端开发 API
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
21 0