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

相关文章
|
4天前
|
JavaScript 数据格式
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
23 1
|
1天前
|
JavaScript API 开发者
关于vue3中v-model做了哪些升级 ?
【10月更文挑战第1天】
97 59
|
2天前
|
监控 JavaScript 安全
vue3添加pinia
本文介绍了Pinia作为Vue 3的状态管理库的特点,包括其基于Vue 3的Composition API、响应式状态管理、零依赖设计、插件系统、Devtools集成、Tree-shakable特性以及对TypeScript的支持,并详细说明了如何在Vue 3项目中安装和初始化Pinia。
9 0
vue3添加pinia
|
2天前
|
JavaScript
vue3完整教程从入门到精通(新人必学2,搭建项目)
本文介绍了如何在Vue 3项目中安装并验证Element Plus UI框架,包括使用npm安装Element Plus、在main.js中引入并使用该框架,以及在App.vue中添加一个按钮组件来测试Element Plus是否成功安装。
13 0
vue3完整教程从入门到精通(新人必学2,搭建项目)
|
2天前
|
JavaScript Java CDN
vue3完整教程从入门到精通(新人必学1,vue3快速上手)
本文提供了Vue 3从入门到精通的完整教程,涵盖了创建Vue应用、通过CDN使用Vue、定义网站以及使用ES模块构建版本的步骤和示例代码。
16 0
vue3完整教程从入门到精通(新人必学1,vue3快速上手)
|
2天前
|
存储 资源调度 JavaScript
Vite是什么?怎样使用Vite创建Vue3项目?
Vite是什么?怎样使用Vite创建Vue3项目?
6 0
|
3天前
|
JavaScript
vue尚品汇商城项目-day02【14.vuex状态管理库】
vue尚品汇商城项目-day02【14.vuex状态管理库】
8 0
|
1天前
|
JavaScript 前端开发 网络架构
vue 路由器history和hash工作模式
vue 路由器history和hash工作模式
|
2天前
|
JSON JavaScript 前端开发
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
10 1
|
3天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
12 2