pinia README

The project's README from github.com/vuejs/pinia. As one markdown file: README.md.

Pinia logo


npm package build status


Pinia

Intuitive, type safe and flexible Store for Vue

The latest version of pinia works with Vue 3. See the branch v2 for a version that works with Vue 2.

Pinia is the most similar English pronunciation of the word pineapple in Spanish: piña. A pineapple is in reality a group of individual flowers that join together to create a multiple fruit. Similar to stores, each one is born individually, but they are all connected at the end. It's also a delicious tropical fruit indigenous to South America.

👉 Demo with Vue 3 on StackBlitz

👉 Demo with Nuxt 3 on StackBlitz

Help me keep working on this project 💚

Gold Sponsors

CodeRabbit

Silver Sponsors

VueMastery Controla SendCloud

Bronze Sponsors

RTVision Storyblok

FAQ

A few notes about the project and possible questions:

Q: Is Pinia the successor of Vuex?

A: Yes

Q: What about dynamic modules?

A: Dynamic modules are not type safe, so instead we allow creating different stores that can be imported anywhere

Installation

# or pnpm or yarn
npm install pinia @vue/devtools-api

Usage

Install the plugin

Create a pinia (the root store) and pass it to app:

// Vue 3
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

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

app.use(pinia)
app.mount('#app')

For more detailed instructions, including Nuxt configuration, check the Documentation.

Create a Store

You can create as many stores as you want, and they should each exist in different files:

import { defineStore } from 'pinia'

// main is the name of the store. It is unique across your application
// and will appear in devtools
export const useMainStore = defineStore('main', {
  // a function that returns a fresh state
  state: () => ({
    counter: 0,
    name: 'Eduardo',
  }),
  // optional getters
  getters: {
    // getters receive the state as first parameter
    doubleCounter: (state) => state.counter * 2,
    // use getters in other getters
    doubleCounterPlusOne(): number {
      return this.doubleCounter + 1
    },
  },
  // optional actions
  actions: {
    reset() {
      // `this` is the store instance
      this.counter = 0
    },
  },
})

defineStore returns a function that has to be called to get access to the store:

import { useMainStore } from '@/stores/main'
import { storeToRefs } from 'pinia'

export default defineComponent({
  setup() {
    const main = useMainStore()

    // extract specific store properties
    const { counter, doubleCounter } = storeToRefs(main)

    return {
      // gives access to the whole store in the template
      main,
      // gives access only to specific state or getter
      counter,
      doubleCounter,
    }
  },
})

Documentation

To learn more about Pinia, check its documentation.

License

MIT

pinia (vuejs/pinia)

Searching Database…

14.7K ·GitHub
Pinia
这是什么？Pinia 是一个面向 Vue 的状态管理库（store），基于 Vue 3 的组合式 API 构建，提供类型安全和 DevTools 支持。
它是框架还是库？它是一个可以添加到 Vue 应用中的库，而不是独立的框架。
怎么把它加到项目里？安装该包，创建一个 pinia 实例（根 store），并将其传给你的 Vue 应用，然后在单独的文件中用 defineStore 定义 store。
必须使用 Vue 3 吗？是的，这个版本的 Pinia 面向 Vue 3；如果用 Vue 2，有一个单独的 v2 分支。
它支持 Vuex 风格的动态模块吗？不支持，动态模块不被支持，因为它们不是类型安全的；取而代之的是，你可以创建独立的 store，并在任何地方导入使用。
Pinia 是要取代 Vuex 吗？是的，README 明确表示 Pinia 定位为 Vuex 的继任者。
Pinia 能和 Nuxt 一起用吗？可以，它有专门的 Nuxt 模块，还有一个基于 Nuxt 3 运行的演示项目，并附有涵盖 Nuxt 配置的文档。
可以有多个 store 吗？可以，你可以创建任意数量的 store，每个通常放在自己的文件中，并通过 defineStore 返回的函数来访问each store。
Pinia 支持 SSR 吗？支持，SSR 是它列出的功能/主题之一，与组合式 API 支持并列。
为什么叫 Pinia？Pinia 的英文读音最接近西班牙语中菠萝一词（piña）。这个名字是一个比喻：就像菠萝上的每一朵小花一样，每个 store 都是单独创建的，但又全部连接在一起。
What are similar projects?vueuse, nuxt, vue, nuqs, vuex, iview, vant, next-auth
Which topics is it in?store, nuxt, vuex, ssr, state-management, nextjs, vue, npm, frontend, library, typescript, javascript
Creator
vuejs
Size
10 MB
Stars
14.7K
Updated
CommitOct 18Release@pinia/[email protected]Oct 14
Age
6y
Commits · 90 Days