// optional getters
getters: {
// getters receive the state as first parameter
- doubleCount: (state) => state.counter * 2,
+ doubleCounter: (state) => state.counter * 2,
// use getters in other getters
- doubleCountPlusOne(): number {
- return this.doubleCount + 1
+ doubleCounterPlusOne(): number {
+ return this.doubleCounter + 1
},
},
// optional actions
const main = useMainStore()
// extract specific store properties
- const { counter, doubleCount } = storeToRefs(main)
+ 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,
- doubleCount,
+ doubleCounter,
}
},
})
```js
const useStore({
id: 'main',
- state: () => ({ counter: 0 })
+ state: () => ({ count: 0 })
})
```
```diff
const store = useStore()
--store.state.counter++
-+store.counter.++
+-store.state.count++
++store.count.++
```
You can still access the whole store state with `$state` when needed:
```diff
const store = useStore()
--store.patch({ counter: 0 })
-+store.$patch({ counter: 0 })
+-store.patch({ count: 0 })
++store.$patch({ count: 0 })
-store.reset()
+store.$reset()
To unit test a store, the most important part is creating a `pinia` instance:
```js
-// counterStore.spec.ts
+// stores/counter.spec.ts
import { setActivePinia, createPinia } from 'pinia'
import { useCounter } from '../src/stores/counter'
```js
export const useStore = defineStore('main', {
state: () => ({
- counter: 0,
+ count: 0,
}),
actions: {
increment() {
- this.counter++
+ this.count++
},
randomizeCounter() {
- this.counter = Math.round(100 * Math.random())
+ this.count = Math.round(100 * Math.random())
},
},
})
```js
// Example File Path:
-// ./src/stores/counterStore.js
+// ./src/stores/counter.js
import { defineStore } from 'pinia',
-const useCounterStore = defineStore('counterStore', {
+const useCounterStore = defineStore('counter', {
state: () => ({
- counter: 0
+ count: 0
}),
actions: {
increment() {
- this.counter++
+ this.count++
}
}
})
While Composition API is not for everyone, the `setup()` hook can make using Pinia easier to work with in the Options API. No extra map helper functions needed!
```js
-import { useCounterStore } from '../stores/counterStore'
+import { useCounterStore } from '../stores/counter'
export default {
setup() {
```js
import { mapActions } from 'pinia'
-import { useCounterStore } from '../stores/counterStore'
+import { useCounterStore } from '../stores/counter'
export default {
methods: {
// same as calling from store.increment()
...mapActions(useCounterStore, ['increment'])
// same as above but registers it as this.myOwnName()
- ...mapActions(useCounterStore, { myOwnName: 'doubleCounter' }),
+ ...mapActions(useCounterStore, { myOwnName: 'doubleCount' }),
},
}
```
```js
export const useStore = defineStore('main', {
state: () => ({
- counter: 0,
+ count: 0,
}),
getters: {
- doubleCount: (state) => state.counter * 2,
+ doubleCount: (state) => state.count * 2,
},
})
```
```ts
export const useStore = defineStore('main', {
state: () => ({
- counter: 0,
+ count: 0,
}),
getters: {
// automatically infers the return type as a number
doubleCount(state) {
- return state.counter * 2
+ return state.count * 2
},
// the return type **must** be explicitly set
doublePlusOne(): number {
```js
export const useStore = defineStore('main', {
state: () => ({
- counter: 0,
+ count: 0,
}),
getters: {
// type is automatically inferred because we are not using `this`
- doubleCount: (state) => state.counter * 2,
+ doubleCount: (state) => state.count * 2,
// here we need to add the type ourselves (using JSDoc in JS). We can also
// use this to document the getter
/**
- * Returns the counter value times two plus one.
+ * Returns the count value times two plus one.
*
* @returns {number}
*/
setup() {
const store = useStore()
- store.counter = 3
+ store.count = 3
store.doubleCount // 6
},
}
```js
// Example File Path:
-// ./src/stores/counterStore.js
+// ./src/stores/counter.js
import { defineStore } from 'pinia'
-const useCounterStore = defineStore('counterStore', {
+const useCounterStore = defineStore('counter', {
state: () => ({
- counter: 0
+ count: 0,
}),
getters: {
- doubleCounter(state) {
- return state.counter * 2
- }
- }
+ doubleCount(state) {
+ return state.count * 2
+ },
+ },
})
```
While Composition API is not for everyone, the `setup()` hook can make using Pinia easier to work with in the Options API. No extra map helper functions needed!
```js
-import { useCounterStore } from '../stores/counterStore'
+import { useCounterStore } from '../stores/counter'
export default {
setup() {
},
computed: {
quadrupleCounter() {
- return this.counterStore.doubleCounter * 2
+ return this.counterStore.doubleCount * 2
},
},
}
```js
import { mapState } from 'pinia'
-import { useCounterStore } from '../stores/counterStore'
+import { useCounterStore } from '../stores/counter'
export default {
computed: {
- // gives access to this.doubleCounter inside the component
- // same as reading from store.doubleCounter
- ...mapState(useCounterStore, ['doubleCounter']),
+ // gives access to this.doubleCount inside the component
+ // same as reading from store.doubleCount
+ ...mapState(useCounterStore, ['doubleCount']),
// same as above but registers it as this.myOwnName
...mapState(useCounterStore, {
- myOwnName: 'doubleCounter',
+ myOwnName: 'doubleCount',
// you can also write a function that gets access to the store
- double: store => store.doubleCount,
+ double: (store) => store.doubleCount,
}),
},
}
state: () => {
return {
// all these properties will have their type inferred automatically
- counter: 0,
+ count: 0,
name: 'Eduardo',
isAdmin: true,
}
```js
const store = useStore()
-store.counter++
+store.count++
```
## Resetting the state
```js
// Example File Path:
-// ./src/stores/counterStore.js
+// ./src/stores/counter.js
import { defineStore } from 'pinia'
-const useCounterStore = defineStore('counterStore', {
+const useCounterStore = defineStore('counter', {
state: () => ({
- counter: 0,
+ count: 0,
}),
})
```
```js
import { mapState } from 'pinia'
-import { useCounterStore } from '../stores/counterStore'
+import { useCounterStore } from '../stores/counter'
export default {
computed: {
- // gives access to this.counter inside the component
- // same as reading from store.counter
- ...mapState(useCounterStore, ['counter'])
+ // gives access to this.count inside the component
+ // same as reading from store.count
+ ...mapState(useCounterStore, ['count'])
// same as above but registers it as this.myOwnName
...mapState(useCounterStore, {
- myOwnName: 'counter',
+ myOwnName: 'count',
// you can also write a function that gets access to the store
- double: store => store.counter * 2,
+ double: store => store.count * 2,
// it can have access to `this` but it won't be typed correctly...
magicValue(store) {
- return store.someGetter + this.counter + this.double
+ return store.someGetter + this.count + this.double
},
}),
},
```js
import { mapWritableState } from 'pinia'
-import { useCounterStore } from '../stores/counterStore'
+import { useCounterStore } from '../stores/counter'
export default {
computed: {
- // gives access to this.counter inside the component and allows setting it
- // this.counter++
- // same as reading from store.counter
- ...mapWritableState(useCounterStore, ['counter'])
+ // gives access to this.count inside the component and allows setting it
+ // this.count++
+ // same as reading from store.count
+ ...mapWritableState(useCounterStore, ['count'])
// same as above but registers it as this.myOwnName
...mapWritableState(useCounterStore, {
- myOwnName: 'counter',
+ myOwnName: 'count',
}),
},
}
<!-- TODO: disable this with `strictMode` -->
-Apart from directly mutating the store with `store.counter++`, you can also call the `$patch` method. It allows you to apply multiple changes at the same time with a partial `state` object:
+Apart from directly mutating the store with `store.count++`, you can also call the `$patch` method. It allows you to apply multiple changes at the same time with a partial `state` object:
```js
store.$patch({
- counter: store.counter + 1,
+ count: store.count + 1,
age: 120,
name: 'DIO',
})
```js
// this doesn't actually replace `$state`
-store.$state = { counter: 24 }
+store.$state = { count: 24 }
// it internally calls `$patch()`:
-store.$patch({ counter: 24 })
+store.$patch({ count: 24 })
```
You can also **set the initial state** of your whole application by changing the `state` of the `pinia` instance. This is used during [SSR for hydration](../ssr/#state-hydration).
projects / thirdparty / vuejs / pinia.git / commitdiff
