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，感谢大家的观看！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。