Vue之Pinia状态管理

更新时间：2023年04月04日 08:49:46 作者：前端程序员小张

这篇文章主要介绍了Vue中Pinia状态管理，Pinia开始于大概2019年，其目的是设计一个拥有组合式 API 的 Vue 状态管理库，Pinia本质上依然是一个状态管理库，用于跨组件、页面进行状态共享，感兴趣的同学可以参考阅读

一、认识Pinia

1.1 认识Pinia

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

状态管理库是什么？

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

应该在什么时候使用 Store?

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

安装：npm install 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对象

我们也可以传入一个带有 state、actions 与 getters 属性的 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 的 state、getters 和 actions 中定义的任何属性。
注意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.$reset()

重置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 可以像函数或者通常意义上的方法一样被调用：

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状态管理的详细内容，更多关于Pinia状态管理的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

vue3 setup点击跳转页面的实现示例
本文主要介绍了vue3 setup点击跳转页面的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-10-10
vue组件之间通信方式实例总结【8种方式】
这篇文章主要介绍了vue组件之间通信方式,结合实例形式总结分析了vue.js的8种组件通信方式与相关操作注意事项,需要的朋友可以参考下
2019-02-02
详解vue中属性执行顺序
这篇文章主要介绍了vue中属性执行顺序,选项的执行顺序是 props -> data -> computed -> watch -> created -> mounted -> methods，具体详细内容本文给大家讲解的非常详细，需要的朋友可以参考下
2023-09-09
vue项目中引入vue-datepicker插件的详解
这篇文章主要介绍了vue项目中引入vue-datepicker插件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
解决router.beforeEach()动态加载路由出现死循环问题
这篇文章主要介绍了解决router.beforeEach()动态加载路由出现死循环问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
解决Vue Loading PostCSS Plugin failed:Cann
这篇文章主要介绍了解决Vue Loading PostCSS Plugin failed:Cannot find module autoprefixer问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
Vue如何获取数据列表展示
这篇文章主要为大家详细介绍了Vue如何获取数据列表展示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12
浅谈vue.js导入css库(elementUi)的方法
下面小编就为大家分享一篇浅谈vue.js导入css库(elementUi)的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
vue之elementUi的el-select同时获取value和label的三种方式
这篇文章主要介绍了vue之elementUi的el-select同时获取value和label的三种方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-02-02
vue element-plus中el-input修改边框border的方法
element样式还是蛮好的,只是有时候我们需要做一些调整,比如el-input的边框,下面这篇文章主要给大家介绍了关于vue element-plus中el-input修改边框border的相关资料,需要的朋友可以参考下
2022-09-09