Training Example: Pinia – Review the Data, Give Your Score & Compare to the Real AI Evaluation

Skip to content
[H1] PiniaThe intuitive store for Vue.js
Type Safe, Extensible, and Modular by design. Forget you are even using a store.Get StartedDemoRuleKit Watch Video IntroductionGet the Pinia Cheat Sheet
[H2] ? Intuitive
Stores are as familiar as components. API designed to let you write well organized stores.
[H2] ? Type Safe
Types are inferred, which means stores provide you with autocompletion even in JavaScript!
[H2] ⚙️ Devtools support
Pinia hooks into Vue devtools to give you an enhanced development experience.
[H2] ? Extensible
React to store changes and actions to extend Pinia with transactions, local storage synchronization, etc.
[H2] ? Modular by design
Build multiple stores and let your bundler code split them automatically.
[H2] ? Extremely light
Pinia weighs ~1.5kb, you will forget it's even there!
[H3] Gold Sponsors
[IMG: CodeRabbit]
[H3] Silver Sponsors
[IMG: VueMastery]
[IMG: Controla]
[IMG: Route Optimizer and Route Planner Software]
[IMG: SendCloud]
Become a Sponsor!

Skip to content
[H1] Pinia符合直觉的
Vue.js 状态管理库
类型安全、可扩展性以及模块化设计。
甚至让你忘记正在使用的是一个状态库。开始使用Demo 演示RuleKit 观看视频介绍获取 Pinia 速查表
[H2] ? 所见即所得
与组件类似的 Store。其 API 的设计旨在让你编写出更易组织的 store。
[H2] ? 类型安全
类型可自动推断，即使在 JavaScript 中亦可为你提供自动补全功能！
[H2] ⚙️ 开发工具支持
不管是 Vue 2 还是 Vue 3，支持 Vue devtools 钩子的 Pinia 都能给你更好的开发体验。
[H2] ? 可扩展性
可通过事务、同步本地存储等方式扩展 Pinia，以响应 store 的变更以及 action。
[H2] ? 模块化设计
可构建多个 Store 并允许你的打包工具自动拆分它们。
[H2] ? 极致轻量化
Pinia 大小只有 1kb 左右，你甚至可能忘记它的存在！
[H3] Gold Sponsors
[IMG: CodeRabbit]
[H3] Silver Sponsors
[IMG: VueMastery]
[IMG: Controla]
[IMG: Route Optimizer and Route Planner Software]
[IMG: SendCloud]
成为赞助者！

[H1] Introduction ​
Master this and much more with a free video from Mastering PiniaPinia started as an experiment to redesign what a Store for Vue could look like with the Composition API around November 2019. Since then, the initial principles have remained the same and Vue 2 support has been dropped in 2025, but Pinia doesn't require you to use the composition API.
[H2] Why should I use Pinia? ​
Pinia is a store library for Vue, it allows you to share a state across components/pages. If you are familiar with the Composition API, you might be thinking you can already share a global state with a simple export const state = reactive({}). This is true for single page applications but exposes your application to security vulnerabilities if it is server side rendered. But even in small single page applications, you get a lot from using Pinia:Testing utilitiesPlugins: extend Pinia features with pluginsProper TypeScript support or autocompletion for JS usersServer Side Rendering supportDevtools support A timeline to track actions and mutationsStores appear in components where they are usedTime travel and easier debuggingHot module replacement Modify your stores without reloading your pageKeep any existing state while developingIf you still have doubts, check out the official Mastering Pinia course. In the beginning we cover how to build our own defineStore() function and then we move to the official Pinia API.✨Vibe code Vue apps with confidenceRuleKit
[IMG: Vue Mastery Logo]
Get the Pinia Cheat Sheet from Vue Mastery
[H2] Basic example ​
This is what using Pinia looks like in terms of API (make sure to check the Getting Started for complete instructions). You start by creating a store:js// stores/counter.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => {
return { count: 0 }
},
// could also be defined as
// state: () => ({ count: 0 })
actions: {
increment() {
this.count++
},
},
})And then you use it in a component:vue<script setup>
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
counter.count++
// with autocompletion ✨
counter.$patch({ count: counter.count + 1 })
// or using an action instead
counter.increment()
</script>
<template>
<!-- Access the state directly from the store -->
<div>Current Count: {{ counter.count }}</div>
</template>Try it in the PlaygroundYou can even use a

[H1] Defining a Store ​
Master this and much more with a free video from Mastering PiniaBefore diving into core concepts, we need to know that a store is defined using defineStore() and that it requires a unique name, passed as the first argument:jsimport { defineStore } from 'pinia'
// You can name the return value of `defineStore()` anything you want,
// but it's best to use the name of the store and surround it with `use`
// and `Store` (e.g. `useUserStore`, `useCartStore`, `useProductStore`)
// the first argument is a unique id of the store across your application
export const useAlertsStore = defineStore('alerts', {
// other options...
})This name, also referred to as id, is necessary and is used by Pinia to connect the store to the devtools. Naming the returned function use... is a convention across composables to make its usage idiomatic.defineStore() accepts two distinct values for its second argument: a Setup function or an Options object.✨Vibe code Vue apps with confidenceRuleKit
[H2] Option Stores ​
Similar to Vue's Options API, we can also pass an Options Object with state, actions, and getters properties.jsexport const useCounterStore = defineStore('counter', {
state: () => ({ count: 0, name: 'Eduardo' }),
getters: {
doubleCount: (state) => state.count * 2,
},
actions: {
increment() {
this.count++
},
},
})You can think of state as the data of the store, getters as the computed properties of the store, and actions as the methods.Option stores should feel intuitive and simple to get started with.
[H2] Setup Stores ​
There is also another possible syntax to define stores. Similar to the Vue Composition API's setup function, we can pass in a function that defines reactive properties and methods and returns an object with the properties and methods we want to expose.jsexport const useCounterStore = defineStore('counter', () => {
const count = ref(0)
const name = ref('Eduardo')
const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}
return { count, name, doubleCount, increment }
})In Setup Stores:ref()s become state propertiescomputed()s become gettersfunction()s become actionsNote that you must return all state properties in setup stores for Pinia to pick them up as state. In other words, you cannot have private state properties in stores. Not returning all state properties or making them readonly will break SSR, devtools, and other plugins.Setup stores bring a lot more flexibility than Option Stores as you can create watchers within a store and freely use any composable. However, keep in mind that using composables will get more complex when using SSR.Setup stores are also able to rely on globally provided properties like the Router or the Route. Any property provided at the App level can be accessed from the store using inject(), just like in components:tsimport { inject } from 'vue'
import { useRoute } from 'vue-router'
import { defineStore } from 'pinia'
export const useSearchFilters = defineStore('search-filters', () => {
const route = useRoute()
// this assumes `app.provide('appProvided', 'value')` was called
const appProvided = inject('appProvided')
// ...
return {
// ...
}
})WARNINGDo not return properties like route or appProvided (from the example above) as they do not belong to the store itself and you can directly access them within components with useRoute() and inject('appProvided').
[H2] What syntax should I pick? ​
As with Vue's Composition API and Options API, pick the one that you feel the most comfortable with. Both have their strengths and weaknesses. Options stores are easier to work with while Setup stores are more flexible and powerful. If you want to dive deeper into the differences, check the Option Stores vs Setup Stores chapter in Mastering Pinia.
[H2] Using the store ​
We are defining a store because the store won't be created until use...Store() is called within a component <script setup> (or within setup() like all composables):vue<script setup>
import { useCounterStore } from '@/stores/counter'
// access the `store` variable anywhere in the component ✨
const store = useCounterStore()
</script>TIPIf you are not using setup components yet, you can still use Pinia with map helpers.You can define as many stores as you want and you should define each store in a different file to get the most out of Pinia (like automatically allowing your bundler to code split and providing TypeScript inference).Once the store is instantiated, you can access any property defined in state, getters, and actions directly on the store. We will look at these in detail in the next pages but autocompletion will help you.Note that store is an object wrapped with reactive, meaning there is no need to write .value after getters but, like props in setup, we cannot destructure it:vue<script setup>
import { useCounterStore } from '@/stores/counter'
import { computed } from 'vue'
const store = useCounterStore()
// ❌ This won't work because it breaks reactivity
// same as reactive: https://vuejs.org/guide/essentials/reactivity-fundamentals.html#limitations-of-reactive
const { name, doubleCount } = store
name // will always be "Eduardo"
doubleCount // will always be 0
setTimeout(() => {
store.increment()
}, 1000)
// ✅ this one will be reactive
// ? but you could also just use `store.doubleCount` directly
const doubleValue = computed(() => store.doubleCount)
</script>
[H2] Destructuring from a Store ​
In order to extract properties from the store while keeping its reactivity, you need to use storeToRefs(). It will create refs for every reactive property. This is useful when you are only using state from the store but not calling any action. Note you can destructure actions directly from the store as they are bound to the store itself too:vue<script setup>
import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'
const store = useCounterStore()
// `name` and `doubleCount` are reactive refs
// This will also extract refs for properties added by plugins
// but skip any action or non reactive (non ref/reactive) property
const { name, doubleCount } = storeToRefs(store)
// the increment action can just be destructured
const { increment } = store
</script>