Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态。
pinia官网
使用方法
1.首先使用 vite 初始化一个 vue3 项目
npm init vite@latest
// 根据命令选项依次选择:vue - typescript
// 安装依赖
npm install // 安装依赖
npm install pinia // 安装 pinia
npm run dev // 启动项目
2.在 main.ts入口文件中引入 pinia
import { createApp } from 'vue'
import { createPinia } from 'pinia' // 引入 pinia
import App from './App.vue'
const pinia = createPinia()
createApp(App).use(pinia).mount('#app') // 使用 pinia
3.在 src下新建 store/counter.ts 用来存放跨组件之间的共享数据
import { defineStore } from "pinia";
// Composition API 组合式api
// defineStore 定义全局共享数据
// defineStore的第一个参数表示唯一id,即命名空间,第二个参数是配置信息
export default defineStore('counter',{/**第一个参数是命名空间 */
state: () => {
return {
count: 1,
title: 'pinia test'
}
},
// 在 actions 中改变数据, 异步操作放在 actions 中
actions: {
add() {
this.count++
},
// 异步操作
asyncAdd() {
setTimeout(() => {
this.count++
}, 2000)
}
}
})
4.分别在 App.vue和HelloWorld.vue 2 个不相关的单文件组件中共享 couter.ts中的数据
App.vue
<script setup lang="ts">
import { storeToRefs } from 'pinia'
import useCounterStore from './store/counter'
import HelloWorld from './components/HelloWorld.vue'
const store = useCounterStore()
// storeToRefs方法将 store中的数据转换成响应式
const { count, title } = storeToRefs(store)
const addHandle = () => {
store.add() // 这里直接调用action中的方法
}
</script>
<template>
<h2>这是 pinia test</h2>
<h1>{{ title }}</h1>
<button @click="addHandle">{{ count }}</button>
<hello-world />
</template>
<style scoped></style>
HelloWorld.vue
<script setup lang="ts">
import { storeToRefs } from 'pinia'
import useCountStore from '../store/counter'
const store = useCountStore()
const { count, title } = storeToRefs(store)
const addClick = () => {
store.add() // 调用 counter.ts中的方法
}
</script>
<template>
<h1>这是 hello world 组件</h1>
<h2>{{ title }}</h2>
<button @click="addClick">{{ count }}</button>
</template>
<style scoped></style>
后记:
为什么要使用 pinia?
Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态。 如果您熟悉 Composition API,您可能会认为您已经可以通过一个简单的 export const state = reactive({}). 这对于单页应用程序来说是正确的,但如果它是服务器端呈现的,会使您的应用程序暴露于安全漏洞。 但即使在小型单页应用程序中,您也可以从使用 Pinia 中获得很多好处:
- dev-tools 支持
1).跟踪动作、突变的时间线
2).Store 出现在使用它们的组件中
3).time travel 和 更容易的调试 - 热模块更换
1).在不重新加载页面的情况下修改您的 Store
2).在开发时保持任何现有状态 - 插件:使用插件扩展 Pinia 功能
- 为 JS 用户提供适当的 TypeScript 支持或 autocompletion
- 服务器端渲染支持
6. 与vuex有什么不同?
与 Vuex 相比,Pinia 提供了一个更简单的 API,具有更少的规范,
提供了 Composition-API 风格的 API,最重要的是,
在与 TypeScript 一起使用时具有可靠的类型推断支持。