关于vue中的Pinia的介绍

Pinia是什么？

Pinia是vue的专属状态库，允许开发者跨组件或页面共享状态，他是一个拥有组合式API的Vue状态管理库，支持vue2和vue3，有三个概念，state、getter 和 action，我们可以假设这些概念相当于组件中的 data、 computed 和 methods。。

Pinia的使用

• 使用npm包管理工具安装：npm install pinia
• 在main.js中创建一个 pinia 实例 (根 store) 并将其传递给应用，如下所视：

import { createApp } from 'vue'
// 引入创建 pinia 实例的api
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

// 注册为vue插件
app.use(pinia)
app.mount('#app')

• 在src目录下创建一个stores文件夹，里面创建一个js文件，作为一个存储库

defineStore第二个参数传入Option对象

与 Vue 的选项式 API 类似，我们也可以传入一个带有 state、actions 与 getters 属性的 Option 对象

• 存储库中的代码如下：

// 1.导入 defineStore 定义Store
import {defineStore} from 'pinia'

// 6.导出该store

// defineStore第一个参数是独一无二的字符串，方便后续组件访问该store
// 第二个参数可以接收一个对象，也可以接收一个函数。
export const useCounterStore = defineStore('counter', {

  // 3.state 都是你的 store 的核心，state 被定义为一个返回初始状态的函数；可以通过 this 访问 state 中的数据
  state: () => ({ count: 0 }),

  // 4.Getter 完全等同于 store 的 state 的计算值。可以通过 defineStore() 中的 getters 属性来定义它们。推荐使用箭头函数，并且它将接收 state 作为第一个参数
  // 如果getters中想要访问其他getters我们可以通过this访问到整个store实例
  getters: {
    double: (state) => state.count * 2,
  },

  // 5.可通过this访问整个store实例，并且action可以是异步的
  actions: {
    increment() {
      console.log(this)
      this.count++
    },
  },
})

defineStore第二个参数传入Setup 函数

也存在另一种定义 store 的可用语法。与 Vue 组合式 API 的 Setup 函数相似，我们可以传入一个函数，该函数定义了一些响应式属性和方法，并且返回一个带有我们想暴露出去的属性和方法的对象。

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() {
    count.value++
  }

  return { count, increment }
})

• 组件中使用store

<script setup>
  // 引入创建store实例的函数
  import {useCounterStore} from '@/stores/count'
  const countStore = useCounterStore()
</script>

<template>
  {{countStore.count}}，{{countStore.double}}
  <button @click="countStore.increment">点击+1</button>
</template>

<style>

</style>

上面代码我们访问shore中的函数或者数据都要使用 store. 会麻烦，我们可以使用解构的形式将我们需要的数据提取出来：

<script setup>
  import { storeToRefs } from 'pinia'
  import {useCounterStore} from '@/stores/count'
  const countStore = useCounterStore()
  // 这样直接解构会失去数据的响应式
  // let {count, double, increment} = countStore;
  let { increment} = countStore;
  // storeToRefs()。它将为每一个响应式属性创建引用
  let {count, double} = storeToRefs(countStore);
</script>

注意：本文是接收在vue3<script setup>使用pinia

插件

由于有了底层 API 的支持，Pinia store 现在完全支持扩展。以下是你可以扩展的内容：

    为 store 添加新的属性

    定义 store 时增加新的选项

    为 store 增加新的方法

    包装现有的方法

    改变甚至取消 action

    实现副作用，如本地存储

    仅应用插件于特定 store

插件是通过 pinia.use() 添加到 pinia 实例的。最简单的例子是通过返回一个对象将一个静态属性添加到所有 store。

关于插件的更多用法可以查看官网：Pinia插件

希望本片文章能够帮助大家快速入门pinia，感谢大家的观看！