From 082a23f0c750f00fd11b23aafcadb73c5e111673 Mon Sep 17 00:00:00 2001
From: Bashu Naimi-Roy <bashunaimiroy@gmail.com>
Date: Sun, 24 Jul 2022 15:44:12 -0400
Subject: [PATCH] docs: minor update of index.md to explain defineStore
 arguments (#1475) [skip ci]

Co-authored-by: Eduardo San Martin Morote <posva13@gmail.com>
---
 packages/docs/core-concepts/index.md | 53 +++++++++++++++++++++++++++-
 packages/docs/ssr/advanced.md        |  3 ++
 2 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 packages/docs/ssr/advanced.md

diff --git a/packages/docs/core-concepts/index.md b/packages/docs/core-concepts/index.md
index 63f02c2a..3dbf614e 100644
--- a/packages/docs/core-concepts/index.md
+++ b/packages/docs/core-concepts/index.md
@@ -10,7 +10,7 @@ Before diving into core concepts, we need to know that a store is defined using
 ```js
 import { defineStore } from 'pinia'
 
-// useStore could be anything like useUser, useCart
+// You can name the return value of `defineStore()` anything you want, but it's best to use the name of the store and surround it with `use` and `Store` (e.g. `useUserStore`, `useCartStore`, `useProductStore`)
 // the first argument is a unique id of the store across your application
 export const useStore = defineStore('main', {
   // other options...
@@ -19,6 +19,57 @@ export const useStore = defineStore('main', {
 
 This _name_, also referred as _id_, is necessary and is used by Pinia to connect the store to the devtools. Naming the returned function _use..._ is a convention across composables to make its usage idiomatic.
 
+`defineStore()` accepts two distinct values for its second argument: a Setup function or an Options object.
+
+## Option Stores
+
+Similar to Vue's Options API, we can also pass an Options Object with `state`, `actions`, and `getters` properties.
+
+```js {2-10}
+export const useCounterStore = defineStore('counter', {
+  state: () => ({ count: 0 }),
+  getters: {
+    double: (state) => state.count * 2,
+  },
+  actions: {
+    increment() {
+      this.count++
+    },
+  },
+})
+```
+
+You can think of `state` as the `data` of the store, and `getters` as the `computed` properties of the store, and `actions` as the `methods`.
+
+Options stores should feel intuitive and simple to get started with.
+
+## Setup Stores
+
+There is also another possible syntax to define stores. Similar to the Vue Composition API's [setup function](https://vuejs.org/api/composition-api-setup.html), we can pass in a function that defines reactive properties and methods and returns an object with the properties and methods we want to expose.
+
+```js
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+  function increment() {
+    count.value++
+  }
+
+  return { count, increment }
+})
+```
+
+In _Setup Stores_:
+
+- `ref()`s become `state` properties
+- `computed()`s become `getters`
+- `function()`s become `actions`
+
+Setup stores bring a lot more flexibility than [Options Stores](#option-stores) as you can create watchers within a store and freely use any [composable](https://vuejs.org/guide/reusability/composables.html#composables). However, keep in mind that using composables will complexify [SSR](../ssr/advanced.md).
+
+## What syntax should I pick?
+
+As with [Vue's Composition API and Option API](https://vuejs.org/guide/introduction.html#which-to-choose), pick the one that you feel the most comfortable with. If you're not sure, try the [Option Stores](#option-stores) first.
+
 ## Using the store
 
 We are _defining_ a store because the store won't be created until `useStore()` is called inside of `setup()`:
diff --git a/packages/docs/ssr/advanced.md b/packages/docs/ssr/advanced.md
new file mode 100644
index 00000000..b2351aef
--- /dev/null
+++ b/packages/docs/ssr/advanced.md
@@ -0,0 +1,3 @@
+# Advanced SSR
+
+WIP
-- 
2.47.2