From: Eduardo San Martin Morote Date: Mon, 13 Jul 2020 17:11:56 +0000 (+0200) Subject: docs: document typing the state with interface X-Git-Tag: 0.1.0~34 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=cc882d72d9380a7c08d43129f602f72e550ce111;p=thirdparty%2Fvuejs%2Fpinia.git docs: document typing the state with interface Close #85 Close #89 --- diff --git a/README.md b/README.md index babbd806..8f397a2e 100644 --- a/README.md +++ b/README.md @@ -65,7 +65,7 @@ A few notes about the project and possible questions: - [ ] List Getters on DevTools - [x] Nuxt Module -- [ ] Should the state be merged at the same level as actions and getters? +- [x] Should the state be merged at the same level as actions and getters? - [ ] Flag to remove devtools support (for very light production apps) - [ ] Allow grouping stores together into a similar structure and allow defining new getters (`pinia`) - ~~Getter with params that act like computed properties (@ktsn)~~ @@ -183,7 +183,7 @@ export default defineComponent({ // In a different file... router.beforeEach((to, from, next) => { - // â This will work + // â This will work (requires an extra param for SSR, see below) const main = useMainStore() if (main.state.isLoggedIn) next() @@ -277,7 +277,7 @@ By default, it will also disable Vuex so you can directly use the `store` folder ```js export default { - disableVuex: false + disableVuex: false, } ``` @@ -301,35 +301,36 @@ In a Raw Vue SSR application you have to modify a few files to enable hydration ```js // entry-server.js -import { getRootState, PiniaSsr } from "pinia"; +import { getRootState, PiniaSsr } from 'pinia' // install plugin to automatically use correct context in setup and onServerPrefetch -Vue.use(PiniaSsr); +Vue.use(PiniaSsr) export default context => { /* ... */ context.rendered = () => { // pass state to context - context.piniaState = getRootState(context.req); - }; - /* ... */ -}; + context.piniaState = getRootState(context.req) + } + /* ... */ +} ``` ```html - -{{{ renderState({ contextKey: 'piniaState', windowKey: '__PINIA_STATE__' }) }}} + + {{{ renderState({ contextKey: 'piniaState', windowKey: '__PINIA_STATE__' }) + }}} ``` ```js // entry-client.js -import { setStateProvider } from "pinia"; +import { setStateProvider } from 'pinia' // inject ssr-state -setStateProvider(() => window.__PINIA_STATE__); +setStateProvider(() => window.__PINIA_STATE__) ``` ### Accessing other Stores @@ -454,8 +455,33 @@ export const useCartUserStore = pinia( ) ``` +## TypeScript + +Pinia is conceived to make typing automatic, benefiting both, JS and, TS users. There are however different ways of handling types when using TS + +### Using an interface to type the `state` + +If you want to define your own interface to type the _state_, explicitly type the return type of the `state` function: + +```ts +interface MainState { + counter: number + name: string +} + +export const useMainStore = createStore({ + id: 'main', + state: (): MainState => ({ + counter: 0, + name: 'Paimon', + }), +}) +``` + ## Related +- Vuex 5 + ## License [MIT](http://opensource.org/licenses/MIT)