Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(en): use case for option function in defineStore #1309

Open
wants to merge 3 commits into
base: v2
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
51 changes: 51 additions & 0 deletions packages/docs/cookbook/create-store-dynamically.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
# Create Store Dynamically

Store can be created dynamically using factory pattern. Which will greatly help reduce boilerplate and structure your application.

## Example

An usecase of multiple tables that require pagination and filter. And all need to have separate stores to keep track of the result and pagings.

We can have a creator function like this

```js
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In this example, there should be ts if you want to use type annotations. Nothing critical, but the formatting would be a little bit better

export const createPagingStore = (initialCurrentPage?: number) => {
const currentPage = ref(initialCurrentPage ?? 0)
const totalPage = ref(0)

return { currentPage, totalPage }
}
```

Inside the `defineStore` option function you will have access to all the state and actions, and extra logic as needed.

```js

export const usePagingWeather = defineStore('pagingWeather, () => {
const pagingStore = createPagingStore(1)
const content = ref()

// Logics for this store

const fetchData = async (page) => {
const data = await api.get(`https://example.com/?page=${page}`)
currentPage.value = page
totalPage.value = data.totalPage
content.value = data.content
}

const sundays = computed(() => {
return pagingStore.content.value.days.filter(day === 'sunday')
})

return {
...pagingStore, // currentPage, totalPage
fetchData,
content,

sundays,
}
})
```

Don't worry about the same `ref`'s inside multiple store to be the same. They are handled by `pinia` as separate states in the stores.
1 change: 1 addition & 0 deletions packages/docs/cookbook/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,6 @@
- [HMR](./hot-module-replacement.md): How to activate hot module replacement and improve the developer experience.
- [Testing Stores (WIP)](./testing.md): How to unit test Stores and mock them in component unit tests.
- [Composing Stores](./composing-stores.md): How to cross use multiple stores. e.g. using the user store in the cart store.
- [Create Store Dynamically](./create-store-dynamically.md): An advance usecase for creating store.
- [Options API](./options-api.md): How to use Pinia without the composition API, outside of `setup()`.
- [Migrating from 0.0.7](./migration-0-0-7.md): A migration guide with more examples than the changelog.