Vue新一代状态管理工具—Pinia—都2023年了,快学起来吧!

简介: Vue新一代状态管理工具—Pinia—都2023年了,快学起来吧!

基本介绍

Pinia 是 Vue.js 的轻量级状态管理库

官方网站:https://pinia.vuejs.org/

中文文档: https://pinia.web3doc.top/introduction.html

为什么学习pinia?

  • pinia和vuex4一样,也是vue 官方 状态管理工具(作者是 Vue 核心团队成员)
  • pinia相比vuex4,对于vue3的 兼容性 更好
  • pinia相比vuex4,具备完善的 类型推荐 => 对 TS 支持很友好
  • pinia同样支持vue开发者工具
  • Pinia 的 API 设计非常接近 Vuex 5提案

pinia核心概念

  • state: 状态
  • actions: 修改状态(包括同步和异步,pinia中没有mutations)
  • getters: 计算属性

vuex只能有一个根级别的状态, pinia 直接就可以定义多个根级别状态

基本使用与state

目标:掌握pinia的使用步骤

(1)安装

yarn add pinia
# or
npm i pinia

(2)在main.js中挂载pinia

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
const pinia = createPinia()
createApp(App).use(pinia).mount('#app')

(3)新建文件store/counter.js

import { defineStore } from 'pinia'
// 创建store,命名规则: useXxxxStore
// 参数1:store的唯一表示
// 参数2:对象,可以提供state actions getters
const useCounterStore = defineStore('counter', {
  state: () => {
    return {
      count: 0,
    }
  },
  getters: {
  },
  actions: {
  },
})
export default useCounterStore

(4) 在组件中使用

<script setup>
import useCounterStore from './store/counter'
const counter = useCounterStore()
</script>
<template>
  <h1>根组件---{{ counter.count }}</h1>
</template>
<style></style>

actions的使用

目标:掌握pinia中actions的使用

在pinia中没有mutations,只有actions,不管是同步还是异步的代码,都可以在actions中完成。

(1)在actions中提供方法并且修改数据

import { defineStore } from 'pinia'
// 1. 创建store
// 参数1:store的唯一表示
// 参数2:对象,可以提供state actions getters
const useCounterStore = defineStore('counter', {
  state: () => {
    return {
      count: 0,
    }
  },
  actions: {
    increment() {
      this.count++
    },
    incrementAsync() {
      setTimeout(() => {
        this.count++
      }, 1000)
    },
  },
})
export default useCounterStore

(2)在组件中使用

<script setup>
import useCounterStore from './store/counter'
const counter = useCounterStore()
</script>
<template>
  <h1>根组件---{{ counter.count }}</h1>
  <button @click="counter.increment">加1</button>
  <button @click="counter.incrementAsync">异步加1</button>
</template>

getters的使用

pinia中的getters和vuex中的基本是一样的,也带有缓存的功能

(1)在getters中提供计算属性

import { defineStore } from 'pinia'
// 1. 创建store
// 参数1:store的唯一表示
// 参数2:对象,可以提供state actions getters
const useCounterStore = defineStore('counter', {
  state: () => {
    return {
      count: 0,
    }
  },
  getters: {
    double() {
      return this.count * 2
    },
  },
  actions: {
    increment() {
      this.count++
    },
    incrementAsync() {
      setTimeout(() => {
        this.count++
      }, 1000)
    },
  },
})
export default useCounterStore

(2)在组件中使用

<h1>根组件---{{ counter.count }}</h1>
  <h3>{{ counter.double }}</h3>

storeToRefs的使用

目标:掌握storeToRefs的使用

如果直接从pinia中解构数据,会丢失响应式, 使用storeToRefs可以保证解构出来的数据也是响应式的

<script setup>
import { storeToRefs } from 'pinia'
import useCounterStore from './store/counter'
const counter = useCounterStore()
// 如果直接从pinia中解构数据,会丢失响应式
const { count, double } = counter
// 使用storeToRefs可以保证解构出来的数据也是响应式的
const { count, double } = storeToRefs(counter)
</script>

pinia模块化

在复杂项目中,不可能吧多个模块的数据都定义到一个store中,一般来说会一个模块对应一个store,最后通过一个根store进行整合

(1)新建store/user.js文件

import { defineStore } from 'pinia'
const useUserStore = defineStore('user', {
  state: () => {
    return {
      name: 'zs',
      age: 100,
    }
  },
})
export default useUserStore

(2)新建store/index.js

import useUserStore from './user'
import useCounterStore from './counter'
// 统一导出useStore方法
export default function useStore() {
  return {
    user: useUserStore(),
    counter: useCounterStore(),
  }
}

(3)在组件中使用

<script setup>
import { storeToRefs } from 'pinia'
import useStore from './store'
const { counter } = useStore()
// 使用storeToRefs可以保证解构出来的数据也是响应式的
const { count, double } = storeToRefs(counter)
</script>

总结


总得来说,Pinia 就是 Vuex 的替代版,可以更好的兼容 Vue2,Vue3以及TypeScript。

在Vuex的基础上去掉了 Mutation,只保留了 state, getter和action。

Pinia拥有更简洁的语法, 扁平化的代码编排,符合Vue3 的 Composition api

目录
相关文章
|
3天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
10 0
|
2天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
7 1
|
2天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用
7 0
|
2天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之二:scss 的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之二:scss 的安装和使用
6 0
|
2天前
|
JavaScript 开发工具 git
Vue 入门系列:.env 环境变量
Vue 入门系列:.env 环境变量
10 1
|
2天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之一:基础项目构建
Vue3+Vite+Pinia+Naive后台管理系统搭建之一:基础项目构建
7 1
|
3天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
3天前
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期
|
3天前
|
JavaScript C++
vue高亮显示组件--转载
vue高亮显示组件--转载
9 0
|
3天前
|
JavaScript
vue知识点
vue知识点
11 0