From: Eduardo San Martin Morote Date: Tue, 17 Aug 2021 15:08:58 +0000 (+0200) Subject: chore: temp add readme X-Git-Tag: @pinia/nuxt@0.0.1~27 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=0f32f498e26859876080be161ce8e477986b238b;p=thirdparty%2Fvuejs%2Fpinia.git chore: temp add readme --- diff --git a/README.md b/README.md new file mode 100644 index 00000000..9bad6f83 --- /dev/null +++ b/README.md @@ -0,0 +1,192 @@ +

+ + Pinia logo + +

+
+

+ npm package + build status + code coverage +

+
+ +# Pinia + +> Intuitive, type safe and flexible Store for Vue + +- 💡 Intuitive +- 🔑 Type Safe +- ⚙️ Devtools support +- 🔌 Extensible +- 🏗 Modular by design +- 📦 Extremely light + +Pinia works both for Vue 2.x and Vue 3.x. It requires Vue 2 with `@vue/composition-api` `^1.1.0-0` or Vue `^3.2.0-0`. + +Pinia is is the most similar English pronunciation of the word _pineapple_ in Spanish: _piña_. A pineapple is in reality a group of individual flowers that join together to create a multiple fruit. Similar to stores, each one is born individually, but they are all connected at the end. It's also a delicious tropical fruit indigenous to South America. + +## 👉 [Demo on CodeSandbox](https://y4dfi.csb.app) + +## Help me keep working on this project 💚 + +- [Become a Sponsor on GitHub](https://github.com/sponsors/posva) +- [One-time donation via PayPal](https://paypal.me/posva) + + + + +

Gold Sponsors

+ +

+ + Passionate People + + + + VueJobs + +

+ +

Silver Sponsors

+ +

+ + Vue Mastery + + + + Vuetify + + + + CodeStream + + + + Bird Eats bug + +

+ +

Bronze Sponsors

+ +

+ + Storyblok + + + + NuxtJS + +

+ +--- + +## FAQ + +A few notes about the project and possible questions: + +**Q**: _Does this replace Vuex, is it its successor?_ + +**A**: No, or at least that's not the main intention + +**Q**: _What about dynamic modules?_ + +**A**: Dynamic modules are not type safe, so instead [we allow creating different stores](#composing-stores) that can be imported anywhere + +## Roadmap / Ideas + +- [x] Should the state be merged at the same level as actions and getters? +- [ ] ~~Allow grouping stores together into a similar structure and allow defining new getters (`pinia`)~~ + You can directly call `useOtherStore()` inside of a getter or action. +- [ ] Getter with params that act like computed properties (@ktsn) + +## Installation + +```bash +yarn add pinia@next +# or with npm +npm install pinia@next +``` + +If you are using Vue 2, make sure to install `@vue/composition-api` version `1.1.0` (or greater): + +```bash +npm install pinia@next @vue/composition-api@next +``` + +## Usage + +### Install the plugin + +Create a pinia (the root store) and pass it to app: + +```js +import { createPinia } from 'pinia' + +app.use(createPinia()) +``` + +### Create a Store + +You can create as many stores as you want, and they should each exist in different files: + +```ts +import { defineStore } from 'pinia' + +// 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, + name: 'Eduardo', + }), + // optional getters + getters: { + doubleCount() { + return this.counter * 2 + }, + // use getters in other getters + doubleCountPlusOne() { + return this.doubleCount * 2 + 1 + }, + }, + // optional actions + actions: { + reset() { + // `this` is the store instance + this.counter = 0 + }, + }, +}) +``` + +`defineStore` returns a function that has to be called to get access to the store: + +```ts +import { useMainStore } from '@/stores/main' + +export default defineComponent({ + setup() { + const main = useMainStore() + + return { + // gives access to the whole store + main, + // gives access only to specific state + state: computed(() => main.counter), + // gives access to specific getter; like `computed` properties + doubleCount: computed(() => main.doubleCount), + } + }, +}) +``` + +## Documentation + +To learn more about Pinia, check [its documentation](https://pinia.esm.dev). + +## License + +[MIT](http://opensource.org/licenses/MIT)