From: Eduardo San Martin Morote Date: Tue, 16 Aug 2022 17:37:56 +0000 (+0200) Subject: docs: consistent wording X-Git-Tag: @pinia/nuxt@0.4.1~15 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=377be8e5fc2cde6e53848b0b6e79e4cb4411c176;p=thirdparty%2Fvuejs%2Fpinia.git docs: consistent wording --- diff --git a/README.md b/README.md index 9c0bc115..cc152768 100644 --- a/README.md +++ b/README.md @@ -158,10 +158,10 @@ export const useMainStore = defineStore('main', { // 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 @@ -185,14 +185,14 @@ export default defineComponent({ 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, } }, }) diff --git a/packages/docs/cookbook/migration-0-0-7.md b/packages/docs/cookbook/migration-0-0-7.md index 54cc4d8a..62a75bf5 100644 --- a/packages/docs/cookbook/migration-0-0-7.md +++ b/packages/docs/cookbook/migration-0-0-7.md @@ -16,7 +16,7 @@ Given a store defined with: ```js const useStore({ id: 'main', - state: () => ({ counter: 0 }) + state: () => ({ count: 0 }) }) ``` @@ -25,8 +25,8 @@ Do ```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: @@ -42,8 +42,8 @@ All store properties (`id`, `patch`, `reset`, etc) are now prefixed with `$` to ```diff const store = useStore() --store.patch({ counter: 0 }) -+store.$patch({ counter: 0 }) +-store.patch({ count: 0 }) ++store.$patch({ count: 0 }) -store.reset() +store.$reset() diff --git a/packages/docs/cookbook/testing.md b/packages/docs/cookbook/testing.md index 4ff2cace..dc1d8654 100644 --- a/packages/docs/cookbook/testing.md +++ b/packages/docs/cookbook/testing.md @@ -24,7 +24,7 @@ Depending on what or how you are testing, we need to take care of these three di 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' diff --git a/packages/docs/core-concepts/actions.md b/packages/docs/core-concepts/actions.md index 37c64703..5d92d5c0 100644 --- a/packages/docs/core-concepts/actions.md +++ b/packages/docs/core-concepts/actions.md @@ -10,14 +10,14 @@ Actions are the equivalent of [methods](https://v3.vuejs.org/guide/data-methods. ```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()) }, }, }) @@ -117,17 +117,17 @@ For the following examples, you can assume the following store was created: ```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++ } } }) @@ -138,7 +138,7 @@ const useCounterStore = defineStore('counterStore', { 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() { @@ -161,7 +161,7 @@ If you would prefer not to use Composition API at all, you can use the `mapActio ```js import { mapActions } from 'pinia' -import { useCounterStore } from '../stores/counterStore' +import { useCounterStore } from '../stores/counter' export default { methods: { @@ -169,7 +169,7 @@ export default { // 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' }), }, } ``` diff --git a/packages/docs/core-concepts/getters.md b/packages/docs/core-concepts/getters.md index 9f475f48..3c479950 100644 --- a/packages/docs/core-concepts/getters.md +++ b/packages/docs/core-concepts/getters.md @@ -10,10 +10,10 @@ Getters are exactly the equivalent of [computed values](https://vuejs.org/guide/ ```js export const useStore = defineStore('main', { state: () => ({ - counter: 0, + count: 0, }), getters: { - doubleCount: (state) => state.counter * 2, + doubleCount: (state) => state.count * 2, }, }) ``` @@ -23,12 +23,12 @@ Most of the time, getters will only rely on the state, however, they might need ```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 { @@ -64,15 +64,15 @@ As with computed properties, you can combine multiple getters. Access any other ```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} */ @@ -158,7 +158,7 @@ export default { setup() { const store = useStore() - store.counter = 3 + store.count = 3 store.doubleCount // 6 }, } @@ -175,19 +175,19 @@ For the following examples, you can assume the following store was created: ```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 + }, + }, }) ``` @@ -196,7 +196,7 @@ const useCounterStore = defineStore('counterStore', { 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() { @@ -206,7 +206,7 @@ export default { }, computed: { quadrupleCounter() { - return this.counterStore.doubleCounter * 2 + return this.counterStore.doubleCount * 2 }, }, } @@ -218,18 +218,18 @@ You can use the same `mapState()` function used in the [previous section of stat ```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, }), }, } diff --git a/packages/docs/core-concepts/state.md b/packages/docs/core-concepts/state.md index 686670bb..dcd07b20 100644 --- a/packages/docs/core-concepts/state.md +++ b/packages/docs/core-concepts/state.md @@ -15,7 +15,7 @@ const useStore = defineStore('storeId', { state: () => { return { // all these properties will have their type inferred automatically - counter: 0, + count: 0, name: 'Eduardo', isAdmin: true, } @@ -79,7 +79,7 @@ By default, you can directly read and write to the state by accessing it through ```js const store = useStore() -store.counter++ +store.count++ ``` ## Resetting the state @@ -103,13 +103,13 @@ For the following examples, you can assume the following store was created: ```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, }), }) ``` @@ -118,21 +118,21 @@ If you are not using the Composition API, and you are using `computed`, `methods ```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 }, }), }, @@ -145,17 +145,17 @@ If you want to be able to write to these state properties (e.g. if you have a fo ```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', }), }, } @@ -169,11 +169,11 @@ You don't need `mapWritableState()` for collections like arrays unless you are r -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', }) @@ -198,9 +198,9 @@ You **cannot exactly replace** the state of a store as that would break reactivi ```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).