让Pinia帮你实现状态管理

拉布拉多拉的多
1,172 阅读3分钟

前面介绍了一下 Vuex，今天我们来聊聊Pinia，看了上一篇文章能了解到，除了 Vuex 这个官方库可以实现外，还有一个叫Pinia的库，Pinia它也是Vue的一个Store库，它允许我们可以跨组件/页面共享状态。各位jym可以两个都学习一下，在不同的项目体量下使用不同的状态管理工具，让你快速实现状态管理。

多组件共享状态，Vuex/Pinia帮你实现状态管理（Vuex篇） - 掘金 (juejin.cn)

什么是Pinia?

Pinia 是一个专为 Vue.js 设计的状态管理库，它允许你在 Vue 应用程序中轻松地管理和维护全局状态。Pinia 被设计为简单、直观且易于扩展，尤其适用于 Vue 3 的 Composition API。

今天我们就着昨天的Vuex文章，来对比了解Pinia，它俩都是专为Vue.js设计的状态管理库，都有各自的特点，方法。

Pinia 的特点：

  1. 易用性：
    • Pinia 提供了一个简单的方法来创建和管理状态。
    • 它使用 TypeScript 构建，支持类型推断，有助于开发者编写类型安全的应用程序。
  2. 现代设计：
    • Pinia 是为 Vue 3 的 Composition API 设计的，但也可以在 Vue 2 中使用。
    • 它采用了更现代的设计模式，与 Vue 3 的设计理念保持一致。
  3. 无 Mutations：
    • 不像 Vuex 需要显式地定义 mutations，Pinia 允许你直接修改状态，简化了开发流程。
  4. 模块化：
    • Pinia 支持模块化的状态管理，使得大型应用程序能够更好地组织状态逻辑。
  5. 热更新：
    • 支持热模块替换 (HMR)，这意味着当状态发生变化时，可以实时更新而不必重新加载整个页面。
  6. 调试工具：
    • 提供了调试工具，可以在浏览器的开发者工具中查看和跟踪状态的变化。

如何构建一个Pinin状态仓库呢？

安装 Pinia

如果你还没有安装 Pinia，可以通过 npm 进行安装：

npm install pinia

初始化 Pinia

  • 首先，在你的应用中初始化 Pinia。你需要创建一个 store 文件，比如 store/index.js，并设置你的应用状态：

    我们和上一篇文章一样，做一个简单记数器应用的状态管理仓库。

// store/index.js
import { defineStore } from "pinia";
import { reactive,computed } from "vue";

export const timerStore = defineStore('timer',()=>{
    // state 属性
    const state = reactive({
        count: 0,
    })
    
    // 计算属性getters
    const doubleCount = computed(() => state.count * 2)
    
    // actions属性
    const increment = () => {
        state.count++
    }
    const decrement = () => {
        state.count--
    }
    return {
        state,
        increment,
        decrement,
        doubleCount
    }
})

通过查看Pinia 的官方文档得知Store 是用 defineStore() 定义的，它的第一个参数是独一无二的名字，pinia会通过这个名字来连接 store 和 devtools，而第二个参数可以有两种，上面的接收一个回调函数是一种，接收一个对象是另一种。

对于接收函数的：

  • ref()/reactive() 就是 state 属性
  • computed() 就是 getters
  • function() 就是 actions

接收对象的：我们就不列举了，贴一张官方文档的图看一下。

image.png

官方文档解释，两种均有利弊，有各自的优缺点，喜欢哪种就用哪种，

  • 接下来，在主文件中（通常是 main.js 或 main.ts）引入 Pinia 并添加到 Vue app 中：
// main.js
import { createApp } from 'vue';
import { createPinia } from 'pinia'
import App from './App.vue';

const app = createApp(App);
app.use(createPinia())
app.mount('#app');

  • 创建 Vue 组件

    为方便起见，直接在App.vue内写入。

<template>
  <div>
    <p>Count: {{ state.count }}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>
 
<script setup>
import { timerStore } from '@/store/pinia';
import { toRefs } from 'vue'
const counter = timerStore();

const { 
  state,
  increment,
  decrement,
  doubleCount
} = toRefs(counter)

</script>
<style scoped>

</style>

结尾

今天的Pinia状态管理内容就到这里吧，其实和Vuex差不多，但是使用起来一眼看上去就比Vuex更简洁，不像Vuex那样规定只能在mutation内修改数据，太繁琐了，不如使用Pinia用的实在，还简单易懂。当然本文仅给那些不知道或不了解Pinia的读者一个初体验，知道vue内可以使用全局状态管理仓库Pinia，有一个初步了解，就可以方便接下来的学习不是吗？

avatar
文章
阅读
粉丝