简单学习一下 Pinia

最新推荐文章于 2024-05-29 13:58:27 发布
最新推荐文章于 2024-05-29 13:58:27 发布
阅读量1.9k 收藏 3
点赞数
分类专栏： Vue 文章标签： Pinia
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CEZLZ/article/details/123580919
版权

文章目录

引入 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全家桶系列

CEZLZ
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Pinia的简单使用
m0_67393828的博客
03-08 493
前言 最近发现vue中出了个Pinia，与vuex一样用来管理状态的。提前简单学习一下，免得以后用到了不会?? Pinia官网： Pinia 以下内容都是基于vue3的 基本使用 安装 npm install pinia@next 注：npm不好使的话，可以用cnpm试一下 在main.js文件中创建一个 pinia（根存储）并将其传递给应用程序 import { createPinia } from 'pinia'; app.use(createPinia()); 基本格式 import { def
快速搞懂Pinia及数据持久化存储(详细教程)
热门推荐
Ghmin的博客
12-05 2万+
简单搞懂Pinia的使用及使用pinia-plugin-persist插件实现数据持久化存储
【一文搞定Pinia】超详细的Pinia教程，比Vuex香太多了！
有事儿私信。
12-10 1万+
伴随vue2到vue3的升级，官方已经用Pinia代替了Vuex成为官方的状态管理库，推荐使用Pinia作为以后不论是vue2还是vue3状态管理库的首选！
实现vue3中的pinia中的数据响应式
最新发布
m0_55333789的博客
05-29 451
实现vue3中的pinia中的数据响应式
pinia的具体使用方法
zsj702177的博客
02-23 2820
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' //定义容器 /
全方位解析 pinia
码农键盘上的梦
04-14 2046
pinia的知识点很少，如果你有Vuex基础，那么学起来更是易如反掌。其实我们更应该关注的是它的函数思想，大家有没有发现我们在Vue3中的所有东西似乎都可以用一个函数来表示，pinia也是延续了这种思想。所以，大家理解这种组合式编程的思想更重要，pinia无非就是以下3个大点：stategettersactions。
Pinia 上手指南
gjzxlihaibo的博客
03-16 485
pinia 是一种全局状态管理工具，其底层其实是对 Vue 自身状态的一种高度封装，本期我们主要讨论 pinia 配合 Vue3 的使用， 在 vue3 中， pinia的全局状态也是基于 reactive 达成的一种 代理对象，
pinia学习笔记pinia学习笔记
03-15
Pinia是Vue.js生态中的一个状态管理库，它是Vuex的替代品，旨在提供更简单、更直观的API，使得在Vue应用中管理和共享状态变得更为便捷。Pinia结合了Vuex的优点并优化了一些繁琐的步骤，使得开发过程更加流畅。 在...
vue3+pinia 面向app项目
04-13
它可以轻松实现动态路由、命名路由、路由守卫等功能，使应用程序的导航变得简单而强大。 在"my-app"这个压缩包文件中，包含了整个项目的所有源代码。解压后，你可以看到项目结构，包括src目录下的各种组件、路由...
Vue3中Pinia状态管理库学习笔记
03-14
Pinia的安装非常简单，可以通过npm或yarn进行： ```bash npm install pinia # 或者 yarn add pinia ``` 接下来，我们引入Pinia到Vue3项目中。在`main.js`文件中，你需要创建一个Pinia实例，并将其挂载到Vue3的全局...
vue3整合pinia案例
12-14
Pinia是Vue3推荐的状态管理库，旨在替代Vuex，提供更简单、更直观的方式来管理组件间共享状态。在这个"vue3整合pinia案例"中，我们将深入探讨如何将Pinia集成到Vue3项目中，以及如何利用它来实现多个Vue页面的数据...
操作系统实验：前端 vue3 + vite3 + pinia实现简易的生产者消费者模型
01-03
内容概要：操作系统实验，前端 vue3 + vite3 + pinia + ant design vue实现简易的生产者消费者模型，可以通过输入表单的形式手动调节生产者的消费速率和消费者的消费速率的形式，实现生产者消费者模型的可视化效果。...
Pinia基础及使用方法
Huangxianlong的博客
08-22 1579
简单来说，Pinia是vueX的新版本，我们都知道Vuex在Vue2中主要充当状态管理的角色，所谓状态管理，就是一个存储数据的地方，存放在Vuex中的数据在各个组件中都能访问到，它是Vue生态中重要的组成部分。在Vue3中，可以使用传统的Vuex来实现状态管理，也可以使用最新的pinia来实现状态管理。Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。Pinia和Vuex的作用是一样的，它也充当的是一个存储数据的作用，存储在pinia的数据也允许我们在各个组件中使用。
pinia的基本使用和核心实现原理
小陈的博客
08-11 3869
vuex缺点：ts兼容性不好、命名空间的缺陷、只能有一个store、mutation和actionpinia 优点：ts兼容性好 、不需要命名空间，可以创建多个store、mutation删掉了pinia只具备以下几个属性，状态、计算属性、动作pinia大小也会更小巧一些actions里面有this问题，所以我们要处理actions的方法里的this般不用高级语法的话，可以直接写成对象格式也就是optionsStore，更符合类似于vuex的语法。...
vue3笔记十七(Pinia)
weixin_43123984的博客
07-08 1185
全局状态管理工具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转化为普通对象后的属性展示
vue3 状态管理方案pinia手记 （一）
baidu_41601048的博客
06-20 3882
pini作为vue生态圈新出来的状态管理工具，因为相交vuex具备更简洁的语法和更好的ts支持，成了vue官方默认的状态管理新方案
pinia的基本创建和统一创建和解构失去响应式解决办法等知识点
动感超人的博客
02-13 5207
【代码】pinia的基本创建和统一创建和解构失去响应式解决办法等知识点。
Vue3 + Pinia使用经历(常见报错、警告)
qq_45609424的博客
06-29 1550
Vue3 + Pinia常见报错、警告。
小满zs学习pinia第三章
08-23
你好！很高兴能回答你关于学习Pinia第三章的问题。那么，Pinia是一个基于Vue 3的状态管理库，它提供了一种简单而强大的方式来管理应用程序的状态。在学习Pinia的第三章中，你可能会遇到一些涉及模块和插件的内容。具体而言，你可以期待学习以下内容： 1. 模块的创建和注册：学习如何创建一个模块来组织你应用程序的状态，以及如何将它们注册到Pinia中。 2. 模块的命名空间：了解如何使用命名空间来避免状态之间的命名冲突，并实现更好的代码组织。 3. 插件的使用：了解如何使用插件来扩展或修改Pinia的行为。这包括使用一些常用的插件，如devtools插件来方便地调试和监控状态变化。 4. 动态模块加载：学习如何使用动态模块加载功能来实现按需加载状态模块。 这只是第三章的一些主要内容，具体还会有更多细节和示例帮助你更好地理解和应用Pinia。希望这能对你的学习有所帮助！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值