简单学习一下 Pinia

最新推荐文章于 2026-05-14 10:37:24 发布
原创 最新推荐文章于 2026-05-14 10:37:24 发布 · 2.3k 阅读 · 4 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#Pinia

文章目录

引入 Pinia

首先在 main.ts 中引入 pinia，通过 createPinia 创建 pinia 实例，然后挂载到 Vue 根实例上。

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'

const app = createApp(App)
/** 创建 pinia 实例 */
const pinia = createPinia()

/** 挂载到 Vue 根实例上 */
app.use(pinia)
app.mount('#app')

创建 Store

首先在 src 下创建 store/index.ts 文件，然后通过 defineStore 对仓库进行配置。

import { defineStore } from 'pinia'

/** main 相当于为容器起一个名字 */
export const useStore = defineStore('main', {
  state: () => {
    return {
      msg: 'Hello World'
    }
  },
  getters: {},
  actions: {} 
})

现在每个页面和组件都可以通过 Pinia 方法读取到全局状态 msg。

state: 用来存储全局状态数据。
getters：相当于组件中的计算属性，有缓存功能。
actions：用来修改全局状态数据。

在组件中读取 Store 数据

在 CostPaymentList 组件中，通过 store/index.ts 文件暴露出来的 useStore 得到 store 实例，就可以在组件里使用 Store 里面的全局状态了。

<template>
 <h1>CostPaymentList Page</h1>

 <!-- 在 template 中，有两种方式可以获取 Store 中的全局状态 -->
 <p>{{ store.msg }}</p>
 <p>{{ store.$state.msg }}</p>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useStore } from '../../store/index'

export default defineComponent({
 name: 'CostPaymentList',
 setup() {
   const store = useStore()

   /** 在 setup 中，有两种方式可以获取 Store 中的全局状态 */
   console.log(store.msg)
   console.log(store.$state.msg)

   return {
     store
   }
 },
})
</script>

打印一下 store：

image

在组件中修改 Store 数据

  1. 首先在 Store 仓库中添加一个 count 全局状态。
import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
 state: () => {
   return {
     count: 0
   }
 }
})
  1. 创建一个新的组件，并为页面中的按钮添加 click 事件，在事件里面修改全局状态 count。
<template>
  <h1>HelloWorld Page</h1>

  <p>{{ store.count }}</p>
  <button @click="handleAddCount">增加</button>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useStore } from '../store/index'

export default defineComponent({
  name: 'HelloWorld',
  setup() {
    const store = useStore()

    const handleAddCount = () => {
      store.count++
    }

    return { store, handleAddCount }
  }
})
</script>
  1. 把新创建的组件引入到 App 组件中。
<template>
  <CostPaymentList />
  <hr />
  <HelloWorld />
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import CostPaymentList from 'views/finance/CostPaymentList.vue'
import HelloWorld from './components/HelloWorld.vue'

export default defineComponent({
  name: 'App',
  components: {
    CostPaymentList,
    HelloWorld
  }
})
</script>

当点击按钮时，两个组件的数据都会同时变化。

image

对 Store 进行解构

在 CostPaymentList 组件对 Store 进行解构，并在 template 中直接使用解构后的数据。

<template>
  <h1>CostPaymentList Page</h1>

  <p>{{ count }}</p>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useStore } from '../../store/index'

export default defineComponent({
  name: 'CostPaymentList',
  setup() {
    const { count } = useStore()

    return {
      count
    }
  },
})
</script>

然后点击 Hello World 组件中的按钮，发现 CostPaymentList 组件中的数据并未同步更新。

image

打印一下解构后的 count：

console.log({count}, typeof count)

image

可以发现 count 是 number 类型，并非是响应式结构，所以才会丢失响应。

如果需要解构后还保持响应式，需要使用到 pinia 暴露出来的 storeToRefs。

<template>
  <h1>CostPaymentList Page</h1>

  <p>{{ count }}</p>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { storeToRefs } from 'pinia'
import { useStore } from '../../store/index'

export default defineComponent({
  name: 'CostPaymentList',
  setup() {
    const store = useStore()
    const { count } = storeToRefs(store)

    return {
      count
    }
  },
})
</script>

通过 storeToRefs 可以使解构出来的数据拥有响应能力。

image

打印一下 count：

image

可以看到，此时的 count 是作了 ref 响应式处理。

修改 Store 状态数据的多种方式

修改 Store 中状态方式除了上面所说的方式，还有三种方式。

  1. 通过 $patch 同时修改多个状态。
<template>
  <h1>HelloWorld Page</h1>

  <p>{{ count }}</p>
  <p>{{ name }}</p>
  <button @click="handleUpdateStore">更新</button>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { storeToRefs } from 'pinia'
import { useStore } from '../store/index'

export default defineComponent({
  name: 'HelloWorld',
  setup() {
    const store = useStore()

    const handleUpdateStore = () => {
      store.$patch({
        count: 100,
        name: 'new_sjw'
      })
    }

    return { ...storeToRefs(store), handleUpdateStore }
  }
})
</script>

image

如果想同时修改多个状态，一定要使用 $patch 吗？

并不是，通过多条语句也可以达到这个目的：

const handleUpdateStore = () => {
      store.count = 100
      store.name = 'new _sjw'
    }

之所以使用 $patch，是因为 Pinia 的官方网站，已经明确表示 $patch 的方式是经过优化的，会加快修改速度，对程序的性能有很大的好处。所以如果是多个状态同时更新据，推荐使用 $patch 方式更新。

  1. 通过 $patch 加函数的形式修改状态

第一种方式中，$patch 接收一个对象，适合基本数据类型的修改，不适合复杂数据的修改（如数组、对象）。

针对这个问题，$patch 可以通过接收一个函数来处理复杂数据：

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => {
    return {
      count: 0,
      name: 'sjw',
      list: [
        { des: '1 号篮球员' },
        { des: '2 号篮球员' },
        { des: '3 号篮球员' }
      ]
    }
  }
})

<template>
  <h1>HelloWorld Page</h1>

  <p>{{ count }}</p>
  <p>{{ name }}</p>
  <ul>
    <li v-for="(item, index) in list" :key="index">{{ item.des }}</li>
  </ul>
  <button @click="handleUpdateStore">更新</button>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { storeToRefs } from 'pinia'
import { useStore } from '../store/index'

export default defineComponent({
  name: 'HelloWorld',
  setup() {
    const store = useStore()

    const handleUpdateStore = () => {
      store.$patch((state) => {
        /** 在这里不要对 state 进行解构，否则会丢失响应式 */
        state.count++
        state.name = 'new_sjw'
        state.list[0].des = '200 号足球员'
      })
    }

    return { ...storeToRefs(store), handleUpdateStore }
  }
})
</script>
  1. 通过调用 actions 来修改状态

对于复杂的修改操作，可以在 actions 中封装一个方法，然后在组件调用该方法即可。

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => {
    return {
      count: 0,
      name: 'sjw',
      list: [
        { des: '1 号篮球员' },
        { des: '2 号篮球员' },
        { des: '3 号篮球员' }
      ]
    }
  },
  actions: {
    changeState() {
      this.count++
      this.name = 'new_sjw'
      this.list[0].des = '200 号足球员'
    }
  }
})

<script lang="ts">
import { defineComponent } from 'vue'
import { storeToRefs } from 'pinia'
import { useStore } from '../store/index'

export default defineComponent({
  name: 'HelloWorld',
  setup() {
    const store = useStore()

    const handleUpdateStore = () => {
      store.changeState()
    }

    return { ...storeToRefs(store), handleUpdateStore }
  }
})
</script>

在使用 actions 的时候，不能时候箭头函数，否则 this 为 undefined。

Getters 的使用

Pinia 中的 Getter 和组件中的计算属性（Computer）作用几乎一样，可以对 State 里面的状态进一步处理。

  1. 首先在 Store 中声明一个 Getter 属性，它对 msg 进行了处理。
import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => {
    return {
      msg: 'Hello'
    }
  },
  getters: {
    logMsg(state) {
      return state.msg + ' Wold!'
    }
  }
})
  1. 在组件中的使用方式和 state 里面的状态一样，直接调用即可。
<template>
  <h1>CostPaymentList Page</h1>

  <p>{{ logMsg }}</p>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { storeToRefs } from 'pinia'
import { useStore } from '../../store/index'

export default defineComponent({
  name: 'CostPaymentList',
  setup() {
    const store = useStore()
    const { logMsg } = storeToRefs(store)

    return {
      logMsg
    }
  },
})
</script>

验证 Getter 的缓存特性：

1.首先在 logMsg 中添加 console.log() 语句，保证 logMsg 每次被调用时都能知道。

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => {
    return {
      msg: 'Hello'
    }
  },
  getters: {
    logMsg(state) {
      console.log('调用了 logMsg')
      return state.msg + ' Wold!'
    }
  }
})
  1. 然后在组件中编写一个方法，使其能够多次调用 logMsg。
<template>
  <h1>CostPaymentList Page</h1>

  <button @click="handleLogMsg">调用</button>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { storeToRefs } from 'pinia'
import { useStore } from '../../store/index'

export default defineComponent({
  name: 'CostPaymentList',
  setup() {
    const store = useStore()
    const { logMsg } = storeToRefs(store)

    const handleLogMsg = () => {
      console.log(logMsg.value)
    }

    return {
      logMsg,
      handleLogMsg
    }
  },
})
</script>

image

可以发现，多次调用 logMsg 时，只打印了一次“调用了 logMsg”，说明 logMsg 真正被调用次数的只有一次，后续的调用都是从缓存中返回数据。

  1. 在组件中编写一个可以更改 msg 状态的方法。
<template>
  <h1>CostPaymentList Page</h1>

  <button @click="handleLogMsg">调用</button>
  <button @click="handleChangeMsg">更改</button>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { storeToRefs } from 'pinia'
import { useStore } from '../../store/index'

export default defineComponent({
  name: 'CostPaymentList',
  setup() {
    const store = useStore()
    const { msg, logMsg } = storeToRefs(store)

    const handleLogMsg = () => {
      console.log(logMsg.value)
    }

    const handleChangeMsg = () => {
      msg.value += 'sjw-'
      console.log(logMsg.value)
    }

    return {
      logMsg,
      handleLogMsg,
      handleChangeMsg
    }
  },
})
</script>

image

可以发现，当 msg 发生变化时，logMsg 都会随着执行一次，清除之前的缓存。

也可以在 Getters 中使用 this。

Store 的互相调用

当项目存在多个 Store 时，这些 Store 之间可以互相调用。

  1. 首先，新增一个新的 userStore，并声明一个 storeName 状态。
/* user.ts */
import { defineStore } from 'pinia'

export const userStore = defineStore('user', {
  state: () => {
    return {
      storeName: 'userStore'
    }
  }
})
  1. 在其它 Store 中引入 userStore 并调用 storeName 属性。
/* index.ts */
import { defineStore } from 'pinia'
import { userStore } from './user'

export const useStore = defineStore('main', {
  state: () => ({
    msg: 'Hello'
  }),
  actions: {
    getUserStore() {
      console.log(userStore().storeName)
    }
  }
})

学习平台：
Pinia入门视频教程 全新一代状态管理工具Pinia -Vue3全家桶系列

全方位解析 pinia
码农键盘上的梦
04-14 2667
pinia的知识点很少，如果你有Vuex基础，那么学起来更是易如反掌。其实我们更应该关注的是它的函数思想，大家有没有发现我们在Vue3中的所有东西似乎都可以用一个函数来表示，pinia也是延续了这种思想。所以，大家理解这种组合式编程的思想更重要，pinia无非就是以下3个大点：stategettersactions。
Vue3实战笔记（14）—pinia基本用法--Store
山花的博客
05-11 1698
成功安装了 Pinia 后，接下来将开始探索如何以最官方正统的方式使用它来增强您的 Vue 应用程序。Pinia 提供了一种简洁且直观的状态管理解决方案，使得在 Vue 中管理复杂的状态变得轻而易举。让我们一起深入学习一下关于Store的用法了解如何充分利用 Pinia 的强大功能，包括状态定义、状态修改、以及如何在组件中轻松访问和响应状态变化。
Pinia 状态流（代码）：公共状态管理的实战范式与本质解耦
最新发布
博客
05-14 68
公共状态流的本质:跨模块的信息管理 pinia的部分 app（组件）挂载pinia之后 可以直接通过defineStore去定义模块（比如说user） 然后里面的公共状态 我在其他模块使用用户信息的时候导入这个useUserStore示例直接去获取里面的信息
【Vue3进阶】Pinia 中的 Store 组合式写法
Jacklx888的博客
01-19 1989
Hey小伙伴们！今天来给大家分享一个Vue3状态管理库Pinia中非常实用的功能——Store的组合式写法。通过这种写法，我们可以将多个store进行组合和复用，使得代码更加模块化、清晰易读。 如果你对Vue3和Pinia感兴趣，或者想学习如何更好地组织和管理应用的状态，那这篇笔记一定要收藏哦
【一文搞定Pinia】超详细的Pinia教程，比Vuex香太多了！
热门推荐
有事儿私信。
12-10 2万+
伴随vue2到vue3的升级，官方已经用Pinia代替了Vuex成为官方的状态管理库，推荐使用Pinia作为以后不论是vue2还是vue3状态管理库的首选！
pinia的具体使用方法
zsj702177的博客
02-23 3160
pinia的具体使用方法 1.安装(pinia支持Vue2和Vue3) 安装需要@next因为pinia2处于beta的阶段,pinia2是对应的Vue3的版本 //使用npm npm install pinia@next //使用yarn yarn add pinia@next 2.核心概念与基本使用 Store是一个保存状态和业务逻辑的实体，可以自由的读取和写入，并且通过导入setup中使用 创建一个store import { defineStore } from 'pinia' //定义容器 /
vue3中的pinia的简单学习记录
a99101的博客
01-09 275
创建一个store目录创建index.js。按照小兔儿鲜的说法是就是相当于计算属性进行。
vue3 学习笔记06 -- pinia的简单使用
weixin_46328739的博客
07-12 1016
使用 Pinia 的步骤可以分为安装和配置 Pinia、创建和封装 store 以及在组件中使用 store。
Pinia 源码阅读和学习
ddd__173__ok的博客
04-12 335
学习 Pinia 源码，研究核心功能是如何实现，并输出相关的 Demo
Pinia
Sunshinedada的博客
02-25 728
1. 更加轻量级：相比 Vuex，Pinia 更加轻量级，因为它不需要使用 Vuex 的一些复杂的概念，如模块和 getter。相比之下，Vuex是一个更完整的状态管理库，它提供了更多的功能，比如模块化、插件和严格模式等。上面的方法都是用来修改单个属性的，如果你需要一次修改多个属性，虽然你可以重复操作上面的方法，但是 pinia 提供了新的方法:store.$patch。// Store 是用 defineStore() 定义的，它的第一个参数要求是一个独一无二的名字，也被用作 id ，是必须传入的。
Pinia 上手指南
gjzxlihaibo的博客
03-16 712
pinia 是一种全局状态管理工具，其底层其实是对 Vue 自身状态的一种高度封装，本期我们主要讨论 pinia 配合 Vue3 的使用， 在 vue3 中， pinia的全局状态也是基于 reactive 达成的一种 代理对象，
Pinia的简单使用
m0_67593693的博客
07-10 498
1.pinia 和 vuex 具有相同的功效， 是 Vue 的存储库，它允许您跨组件/页面共享状态。2.设计使用的是 Composition api，更符合vue3的设计思维。3.Pinia 对 Vue 2 和 Vue 3 都有效，并且不需要您使用组合 API。
Pinia基础及使用方法
Huangxianlong的博客
08-22 2000
简单来说，Pinia是vueX的新版本，我们都知道Vuex在Vue2中主要充当状态管理的角色，所谓状态管理，就是一个存储数据的地方，存放在Vuex中的数据在各个组件中都能访问到，它是Vue生态中重要的组成部分。在Vue3中，可以使用传统的Vuex来实现状态管理，也可以使用最新的pinia来实现状态管理。Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。Pinia和Vuex的作用是一样的，它也充当的是一个存储数据的作用，存储在pinia的数据也允许我们在各个组件中使用。
Pinia（二）了解和使用Store
broken_promise的博客
08-13 1万+
store通过函数定义store.接收两个参数id: 唯一的标识,string类型.Pinia使用id与开发者工具建立联系.第二个参数可以是一个函数, 也可以是一个对象.返回一个函数, 一般约定将返回值命名为use....第二个参数: 对象类型如果要传入对象类型作为第二个参数, 在对象中可以配置state: 状态, 即数据. 📕注意state是一个函数, 函数的返回值才是真正定义的数据getters: 计算属性actions: 修改状态的方法return {...
pinia状态管理
yf18040578780的博客
07-04 521
pinia状态管理
pinia核心模块----store
每天都要努力学习哦~~
02-07 1602
/ 引入defineStore 方法/*** pinia中使用defineStore定义store* 第一个参数是应用程序中 store 的唯一 id* 第二个参数是是一个对象，store的配置项，比如配置store内的数据，修改数据的方法等等。* 返回一个函数使用use+模块名命名*/// 其它配置项/*** 定义当前的模块的state* state是一个函数，必须有返回值* 返回值就是这个模块的状态* @returns*/state() {// 返回age为1。
Pinia的基本使用
qq_44505797的博客
04-27 1万+
(官网解释)一个 Store （如 Pinia）是一个实体，它持有未绑定到您的组件树的状态和业务逻辑。换句话说，它托管全局状态。它有点像一个始终存在并且每个人都可以读取和写入的组件。它有三个概念，state、getters 和 actions 并且可以安全地假设这些概念等同于组件中的“数据”、“计算”和“方法”。我们可以把这三个概念理解为vue组件中的“数据”data、“计算”computed和“方法”methods。store简单来说就是数据仓库的意思，我们数据都放在store里面。
Pinia学习日记（一）——构建Store仓库，存储数据实现持久化
m0_63611828的博客
08-07 980
Pinia学习日记（一）——构建Store仓库，存储数据实现持久化
vue3笔记十七(Pinia)
weixin_43123984的博客
07-08 1339
全局状态管理工具Pinia.js 有如下特点：官方文档Pinia git 地址 https://github.com/vuejs/pinia2.1、安装 2.2、注册 3、初始化Store仓库 1、src下新建store文件夹 2、新建一个[name].ts文件 3、在新建的[name].ts文件下定义仓库 4、新建一个store-namespace/index.ts文件用于名称管理 4、pinia中state值修改的五种方式 5、解构pinia中state值 store转化为普通对象后的属性展示
Pinia使用详解
weixin_48746746的博客
03-11 1503
Pinia本质上依然是一个状态管理的库，用于跨组件、页面进行状态共享（这点和Vuex、Redux一样）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值