【Vue全家桶】新一代的状态管理--Pinia

简介: 【Vue全家桶】新一代的状态管理--Pinia

什么是 Pinia


Pinia (西班牙语中的菠萝),本质上依然是一个状态管理的库,用于跨组件、页面进行状态共享.

pinia 与 vuex 的区别:


  1. 更友好的TypeScript支持,Vuex之前对TS的支持很不友好
  2. 与 Vuex 相比,Pinia 提供了一个更简单的 API,具有更少的仪式,提供了 Composition-API 风格的 API
  3. 不再有modules的嵌套结构
  4. 也不再有命名空间的概念,不需要记住它们的复杂关系


如何使用 Pinia

1.安装 pinia

yarn add pinia

2.创建一个pinia

// src/stores/index.js
import { createPinia } from "pinia";
const pinia = createPinia()
export default pinia
//main.js
import pinia from './stores'
app.use(pinia)

认识 Store


一个 Store (如 Pinia)是一个实体,它会持有为绑定到你组件树的状态和业务逻辑,也就是保存了全局的状态


这样就可以定义任意数量的Store来管理你的状态,包括 state、getters、actions


1. 定义一个store


  • Store 是使用 defineStore() 定义的,
  • 且它需要一个唯一名称,作为第一个参数传递

微信图片_20221011160255.png


2. 使用 store


微信图片_20221011160343.png微信图片_20221011160350.png


操作 State


state 是 store 的核心部分,store是用来实现我们管理状态的。微信图片_20221011160504.png

  • 方式一:直接一个个修改state
  • 方式二:一次性修改多个状态
  • 方式三:替换state
  • 方式四:重置state

微信图片_20221011160549.png微信图片_20221011160555.png微信图片_20221011160600.png微信图片_20221011160609.png

Getters


1. 认识和定义 Getters


Getters相当于Store的计算属性:


  • 可以用 defineStore() 中的 getters 属性定义;
  • getters中可以定义接受一个state作为参数的函数;


2. 访问 Getters


  • 方式一:访问当前 store 的Getters
  • 方式二:Getters 中访问自己的其他Getters
  • 方式三:访问其他的 store 的Getters
getters: {
    // 1. 基本使用
    debouleCount(state) {
      return state.count * 2
    },
    // 2. 一个 getters 引入另外一个 getters
    useDebouleCount() {
      return this.debouleCount + 2
    },
    // 3. getter也支持返回一个函数
    getFriendById(state) {
      return function (id) {
        for (let i = 0; i < state.vagetabel.length; i++) {
          const vagetabel = state.vagetabel[i]
          if (vagetabel.id === id) {
            return vagetabel
          }
        }
      }
    },
    // 4.访问其他store中的Getters
    showMessage(state) {
      // 获取user信息
      const useStore = useUser()
      // 获取自己的state
      // 拼接信息
      return `name:${useStore.name} - count:${state.count}`
    }
  }

微信图片_20221011160836.png

认识和定义 Action


Action 可以理解成组件中的 methods ,和getters一样,在action中可以通过this访问整个store实例的所有操作。

微信图片_20221011160939.png

Action 是支持异步操作的,所以可以使用 await。

微信图片_20221011161022.png

相关文章
|
3天前
|
存储 JavaScript API
Vue 全局状态管理新宠:Pinia实战指南
 随着Vue.js项目的日益复杂,高效的状态管理变得至关重要。Pinia作为Vue.js官方推荐的新一代状态管理库,以其简洁的API和强大的功能脱颖而出。本文将带您快速上手Pinia,从安装到应用,轻松实现Vue.js项目的全局状态管理,提升开发效率和项目可维护性。
|
10天前
|
JavaScript
|
9天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
24 2
|
12天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
29 4
|
12天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
26 6
|
12天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
20 1
|
12天前
|
JavaScript 定位技术
【天地图】vue 天地图 T is not defined
【天地图】vue 天地图 T is not defined
30 1
|
17天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架:组件化开发利于重用与扩展,响应式数据绑定简化状态管理;学习曲线平缓,生态系统丰富,集成便捷,且具性能优化手段。缺点包括社区规模相对小,类型支持不足(Vue 3.x改善),路由和状态管理需额外配置,SEO支持有限。随着发展,部分缺点正被克服。
25 1
|
18天前
|
JavaScript
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
|
12天前
|
JavaScript 前端开发
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
49 0