【Vue全家桶】Pinia状态管理

这篇具有很好参考价值的文章主要介绍了【Vue全家桶】Pinia状态管理。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

【Vue全家桶】Pinia状态管理

写在前面

🤗这里是前端程序员小张!

🌻人海茫茫,感谢这一秒你看到这里。希望我的文章对你的有所帮助!

🌟愿你在未来的日子,保持热爱,奔赴山海!

一、认识Pinia

1.1 认识Pinia

  • Pinia开始于大概2019年,其目的是设计一个拥有 组合式 API 的 Vue 状态管理库
  • 目前同时兼容Vue2、Vue3,也并不要求你使用Composition API
  • Pinia本质上依然是一个状态管理库,用于跨组件、页面进行状态共享

状态管理库是什么

  • 是一个保存状态和业务逻辑的实体,它会持有为绑定到你组件树的状态和业务逻辑,也就是保存了全局的状态
  • 它有点像一个永远存在的组件,每个组件都可以读取和写入它;
  • 你可以在你的应用程序中定义任意数量的Store来管理你的状态;

应该在什么时候使用 Store?

  • 一个 Store 应该包含可以在整个应用中访问的数据这包括在许多地方使用的数据,例如显示在导航栏中的用户信息,以及需要通过页面保存的数据,例如一个非常复杂的多步骤表单。
  • 另一方面,应该避免在 Store 中引入那些原本可以在组件中保存的本地数据,例如,一个元素在页面中的可见性。

安装npm install pinia

【Vue全家桶】Pinia状态管理

1.2 为什么使用Pinia?

使用 Pinia,即使在小型单页应用中,你也可以获得如下功能:

  • Devtools 支持
    • 追踪 actions、mutations 的时间线
    • 在组件中展示它们所用到的 Store
    • 让调试更容易的 Time travel
  • 热更新
    • 不必重载页面即可修改 Store
    • 开发时可保持当前的 State
  • 插件:可通过插件扩展 Pinia 功能
  • 为 JS 开发者提供适当的 TypeScript 支持以及自动补全功能。
  • 支持服务端渲染

二、 Store

Store有三个核心概念:

  • state、getters、actions;
  • 等同于组件的data、computed、methods;
  • 一旦 store 被实例化,你就可以直接在 store 上访问 state、getters 和 actions 中定义的任何属性;

2.1 定义Store

Store 是用 defineStore() 定义的

  • 它需要一个唯一名称,作为第一个参数传递
  • 这个名字 ,也被用作 id ,是必须传入的, Pinia 将用它来连接 store 和 devtools。
  • 返回的函数统一使用useX作为命名方案,这是约定的规范
  • defineStore() 的第二个参数可接受两类值:Setup 函数或 Option 对象
import { defineStore } from 'pinia'

// 你可以对 `defineStore()` 的返回值进行任意命名,但最好使用 store 的名字,同时以 `use` 开头且以 `Store` 结尾。
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useCounterStore = defineStore('counter', {
  // 其他配置...
})

2.2 Option对象

我们也可以传入一个带有 stateactionsgetters 属性的 Option 对象:

  • 我们可以认为
    • state 是 store 的数据 (data)
    • getters 是 store 的计算属性 (computed)
    • actions 则是方法 (methods)
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    double: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

2.3 setup函数

与 Vue 组合式 API 的 setup 函数 相似

  • 我们可以传入一个函数,该函数定义了一些响应式属性和方法
  • 并且返回一个带有我们想暴露出去的属性和方法的对象
  • Setup Store 中:
    • ref() 就是 state 属性
    • computed() 就是 getters
    • function() 就是 actions
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() {
    count.value++
  }

  return { count, increment }
})

2.4 使用定义的Store

Store在它被使用之前是不会创建的,我们可以通过调用**useStore()**来使用Store:

<script setup>
import { useCounterStore } from '@/stores/counter'
const store = useCounterStore()
</script>
  • 一旦 store 被实例化,你可以直接访问在 store 的 stategettersactions 中定义的任何属性。
  • 注意Store获取到后不能被解构,那么会失去响应式
    • 为了从 Store 中提取属性同时保持其响应式,您需要使用storeToRefs()

三、Pinia核心概念State

3.1 定义State

state 是 store 的核心部分,因为store是用来帮助我们管理状态的

  • 在 Pinia 中,状态被定义为返回初始状态的函数
import { defineStore } from 'pinia'

export const useCounter = defineStore('counter', {
  // 为了完整类型推理,推荐使用箭头函数
  state: () => {
    return {
      // 所有这些属性都将自动推断出它们的类型
      counter: 0
    }
  }
})

3.2 操作State

读取和写入State

  • 默认情况下,您可以通过 store 实例访问状态来直接读取和写入状态
const counterStore = useCounter()
counterStore.counter++

重置State

  • 你可以通过调用 store 上的 $reset() 方法将状态 重置 到其初始值
const counterStore = useCounter()
counterStore.$reset()

变更State

  • 除了用 store.count++ 直接改变 store,你还可以调用 $patch 方法
  • 它允许你用一个 state 的对象在同一时间更改多个属性
counterStore.$patch({
  counter : 1,
  age: 120,
  name: 'pack',
})

3.3 使用选项式 API 的用法

// 示例文件路径:
// ./src/stores/counter.js

import { defineStore } from 'pinia'

const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
})

四、Pinia核心概念Getters

4.1 认识Getters

Getters 完全等同于 store 的 state 的计算属性

  • 可以通过 defineStore() 中的 getters 属性来定义它们。
  • 推荐使用箭头函数,并且它将接收 state 作为第一个参数
export const useCounter = defineStore('counter', {
  state: () => ({
    counter: 15
  }),
  getters: {
    doubleCounter: (state) => state.counter * 2
  }
})

4.2 访问Getters

访问当前store 实例上的 getters

const counterStore = useCounter()
console.log(counterStore.doubleCounter)

Getters中访问当前store实例的其他Getters

  • 我们可以通过 this,你可以访问到其他任何 getters
getters: {
  doubleCount: (state) => state.counter * 2,
  // 返回 counter 的值乘以 2 加 1
  doubleCountPlusOne() {
    return this.doubleCount + 1
  }
}

访问其他store实例的Getters

getters: {
    otherGetter(state) {
      const otherStore = useOtherStore()
      return state.localData + otherStore.data
    }
}

4.3 向Getters传递参数

Getters可以 返回一个函数,该函数可以接受任意参数

export const useUserListStore = defineStore('main', {
  state: () => ({
    users: [
      { id: 1, name: 'lisa' },
      { id: 2, name: 'pack' }
    ]
  }),
  getters: {
    getUserById: (state) => {
      return (userId) => {
        state.users.find((user) => user.id === userId)
      }
    }
  }
})

在组件中使用:

<template>
  <p>User 2: {{ getUserById(2) }}</p>
</template>

<script setup>
import { useUserListStore } from './store'
const userList = useUserListStore()
const { getUserById } = storeToRefs(userList)
</script>

五、Pinia核心概念Actions

5.1 认识Actions

Actions 相当于组件中的 methods。

  • 可以通过 defineStore() 中的 actions 属性来定义,并且它们也是定义业务逻辑的完美选择。

  • 类似 Getters,Actions 也可通过 this 访问整个 store 实例

    export const useCounterStore = defineStore('counter', {
      state: () => ({
        counter: 15
      }),
      actions: {
        increment() {
          this.counter++
        }
      }
    })
    

5.2 Actions执行异步操作

Actions 中是支持异步操作的,并且我们可以编写异步函数,在函数中使用await

actions: {
  increment() {
    this.counter++
  },
  async fetchDataAction() {
    const res = await fetch("http://jsonplaceholder.typicode.com/posts")
    const data = await res.json()
    return data
  }
}

Actions 可以像函数或者通常意义上的方法一样被调用:文章来源地址https://www.toymoban.com/news/detail-406352.html

<script setup>
import { useCounterStore } from './store/couter';

const counterStore = useCounterStore()
counterStore.fetchDataAction().then(res => {
  console.log(res)
})
</script>

5.3 访问其他 store 的 Actions

import { useAuthStore } from './auth-store'

export const useSettingsStore = defineStore('settings', {
  state: () => ({
    preferences: null,
    // ...
  }),
  actions: {
    async fetchUserPreferences() {
      const auth = useAuthStore()
      if (auth.isAuthenticated) {
        this.preferences = await fetchPreferences()
      } else {
        throw new Error('User must be authenticated')
      }
    },
  },
})

到了这里,关于【Vue全家桶】Pinia状态管理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue使用 Pinia 进行状态管理

    Pinia 是一个适用于 Vue.js 的状态管理库,它采用了组合式 API 的理念,使得状态管理变得更加简单、直观和灵活。与传统的 Vuex 相比,Pinia 提供了更好的 TypeScript 支持,同时也更加适合大型应用程序和复杂状态逻辑的管理。 首先,我们需要在 Vue 项目中安装 Pinia。你可以通过

    2024年02月13日
    浏览(66)
  • Vue--》探索Pinia:Vue状态管理的未来

    目录 Pinia的讲解与使用 Pinia的安装与使用 store数据操作 解构store数据

    2024年02月05日
    浏览(40)
  • vue全家桶进阶之路37:Vue3 状态管理

    Vue3 的状态管理主要是通过 Vuex 4 来实现。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 在Vue3的状态管理中,以下是各个属性的作用: state :存储应用程序中的状

    2023年04月18日
    浏览(41)
  • vue全家桶进阶之路39:Vue3 状态管理

    Vue3 的状态管理主要是通过 Vuex 4 来实现。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 在Vue3的状态管理中,以下是各个属性的作用: state :存储应用程序中的状

    2023年04月18日
    浏览(41)
  • vue3学习-Pinia状态管理

    定义一个Store 这个 name ,也称为 id ,是必要的,Pinia 使用它来将 store 连接到 devtools。 将返回的函数命名为 use… 是跨可组合项的约定,以使其符合你的使用习惯。 使用 store 一旦 store 被实例化,你就可以直接在 store 上访问 state 、 getters 和 actions 中定义的任何属性 store 是一

    2024年02月14日
    浏览(40)
  • Vue最新状态管理工具Pinia——彻底搞懂Pinia是什么

    知识专栏 专栏链接 Vuex知识专栏 https://blog.csdn.net/xsl_hr/category_12158336.html?spm=1001.2014.3001.5482 Vuex官方文档 https://vuex.vuejs.org/zh/ Pinia官方文档 https://pinia.web3doc.top/ 最近在 前端的深入学习过程 中,接触了与 状态管理 相关的内容,涉及到 与vue2适配的vuex 和 与vue3适配的pinia ,因此

    2024年02月03日
    浏览(51)
  • vue3 快速入门系列 —— 状态管理 pinia

    其他章节请看: vue3 快速入门 系列 vue3 状态管理这里选择 pinia。 虽然 vuex4 已支持 Vue 3 的 Composition API,但是 vue3 官网推荐新的应用使用 pinia —— vue3 pinia redux、mobx、vuex、pinia都是集中式状态管理工具。与之对应的就是分布式。 Pinia 符合直觉 的 Vue.js 状态管理库 甚至让你忘

    2024年04月26日
    浏览(36)
  • vue:状态管理库及其部分原理(Vuex、Pinia)

    多组件的状态共享问题: 当多个组件需要访问和修改相同的数据时,我们需要在组件之间传递 props或者使用事件总线。当,应用就会变得难以维护和调试。 多组件状态同步问题: 当一个组件修改了状态,其他组件可能无法立即得知该变化。 状态变更的追踪问题: 无法追踪

    2024年01月19日
    浏览(50)
  • vue 全局状态管理(简单的store模式、使用Pinia)

    多个组件可能会依赖同一个状态时,我们有必要抽取出组件内的共同状态集中统一管理,存放在一个全局单例中,这样任何位置上的组件都可以访问其中的状态或触发动作 通过自定义一个store模式实现全局的状态管理,实例如下 有两个组件a、b共享store和store2两个状态,我们

    2024年02月13日
    浏览(51)
  • 深入 Pinia:从代码出发探索 Vue 状态管理的奥秘

    🍍 项目地址:https://github.com/mk965/read-pinia 🧑🏼‍💻 本节代码:https://github.com/mk965/read-pinia/tree/article_1 🚗源码地址: github.com/vuejs/pinia 📦打包文件: rollup.config.js 🚪入口文件: packages/pinia/src/index.ts 将 pinia/packages/pinia/src 目录下的所有文件复制到我们之前生成项目的 /src

    2023年04月25日
    浏览(94)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包