```ts
import { defineStore } from 'pinia'
-export const useMainStore = defineStore({
- // name of the store
- // it is used in devtools and allows restoring state
- id: 'main',
+// 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,
```js
import { useUserStore } from './user'
-export const cartStore = defineStore({
- id: 'cart',
+export const cartStore = defineStore('cart', {
getters: {
// ... other getters
summary(state) {
import { useUserStore } from './user'
import { useCartStore } from './cart'
-export const useSharedStore = defineStore({
- id: 'shared',
+export const useSharedStore = defineStore('shared', {
getters: {
summary() {
const user = useUserStore()
import { useUserStore } from './user'
import { useCartStore } from './cart'
-export const useSharedStore = defineStore({
- id: 'shared',
+export const useSharedStore = defineStore('shared', {
actions: {
async orderCart() {
const user = useUserStore()
import { mapStores } from 'pinia'
// given two stores with the following ids
-const useUserStore = defineStore({ id: 'user' })
-const useCartStore = defineStore({ id: 'cart' })
+const useUserStore = defineStore('user', {
+ // ...
+})
+const useCartStore = defineStore('cart', {
+ // ...
+})
export default {
computed: {
Actions are the equivalent of [methods](https://v3.vuejs.org/guide/data-methods.html#methods) in components. They can be defined with the `actions` property in `defineStore()` and **they are perfect to define business logic**:
```js
-export const useStore = defineStore({
- id: 'main',
+export const useStore = defineStore('main', {
state: () => ({
counter: 0,
}),
const api = mande('/api/users')
-export const useUsers = defineStore({
- id: 'users',
+export const useUsers = defineStore('users', {
state: () => ({
data: userData,
// ...
```js
import { useAuthStore } from './auth-store'
-export const useSettingsStore = defineStore({
- id: 'settings',
+export const useSettingsStore = defineStore('settings', {
state: () => ({
// ...
}),
Getters are exactly the equivalent of [computed values](https://v3.vuejs.org/guide/reactivity-computed-watchers.html#computed-values) for the state of a Store. They can be defined with the `getters` property in `defineStore()`. They receive the `state` as the first parameter **to encourage** the usage of arrow function:
```js
-export const useStore = defineStore({
- id: 'main',
+export const useStore = defineStore('main', {
state: () => ({
counter: 0,
}),
Most of the time, getters will only rely on the state, however, they might need to use other getters. Because of this, we can get access to the _whole store instance_ through `this` when defining a regular function **but it is necessary to define the type of the return type (in TypeScript)**. This is due to a known limitation in TypeScript and **doesn't affect getters defined with an arrow function nor getters not using `this`**:
```ts
-export const useStore = defineStore({
- id: 'main',
+export const useStore = defineStore('main', {
state: () => ({
counter: 0,
}),
As with computed properties, you can combine multiple getters. Access any other getter via `this`. Even if you are not using TypeScript, you can hint your IDE for types with the [JSDoc](https://jsdoc.app/tags-returns.html):
```js
-export const useStore = defineStore({
- id: 'main',
+export const useStore = defineStore('main', {
state: () => ({
counter: 0,
}),
```js
import { useOtherStore } from './other-store'
-export const useStore = defineStore({
- id: 'main',
+export const useStore = defineStore('main', {
state: () => ({
// ...
}),
import { defineStore } from 'pinia'
// useStore could be anything like useUser, useCart
-export const useStore = defineStore({
- // unique id of the store across your application
- id: 'storeId',
+// the first argument is a unique id of the store across your application
+export const useStore = defineStore('main', {
+ // other options...
})
```
It is possible to create new options when defining stores to later on consume them from plugins. For example, you could create a `debounce` option that allows you to debounce any action:
```js
-defineStore({
- id: 'search',
- // ...
+defineStore('search', {
actions: {
searchContacts() {
// ...
```js
import { defineStore } from 'pinia'
-const useStore = defineStore({
- id: 'storeId',
+const useStore = defineStore('storeId', {
// can also be defined with an arrow function if you prefer that syntax
state() {
return {
```ts
import { defineStore } from 'pinia'
-const useCartStore = defineStore({
+const useCartStore = defineStore('cart', {
// ...
})
// stores/counter.js
import { defineStore } from 'pinia'
-export const useCounterStore = defineStore({
- id: 'counter',
+export const useCounterStore = defineStore('counter', {
state() {
return { count: 0 }
},
If you are still not into `setup()` and Composition API, don't worry, Pinia also support a similar set of [_map helpers_ like Vuex](https://vuex.vuejs.org/guide/state.html#the-mapstate-helper). You define stores the same way but then use `mapStores()`, `mapState()`, or `mapActions()`:
```js
-const useCounterStore = defineStore({
- id: 'counter',
+const useCounterStore = defineStore('counter', {
state: () => ({ count: 0 }),
getters: {
double: (state) => state.count * 2,
}
})
-const useUserStore = defineStore({ id: 'user' })
+const useUserStore = defineStore('user', {
+ // ...
+})
export default {
computed: {
```js
import { defineStore } from 'pinia'
-export const todos = defineStore({
- id: 'todos',
+export const todos = defineStore('todos', {
state: () => ({
/** @type {{ text: string, id: number, isFinished: boolean }[]} */
todos: [],
You can also use [the context](https://nuxtjs.org/docs/2.x/internals-glossary/context) in any store by using the injected property `$nuxt`:
```js
-defineStore({
- id: 'cart',
-
+defineStore('cart', {
actions: {
purchase() {
const user = useUserStore()
projects / thirdparty / vuejs / pinia.git / commitdiff
