<template>
  <button @click="increment">
    Count is: {{ state.count }}, double is: {{ state.double }}
  </button>
</template>

<script>
import { reactive, computed } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2)
    })

    function increment() {
      state.count++
    }

    return {
      state,
      increment
    }
  }
}
</script>

export function createApp() {
  // Here there could also be a router
  const store = useStore(true)

  // we can change the state now!
  store.state.counter++

  // create the app instance
  const app = new Vue({
    render: h => h(App),
  })

  // expose the app and the store.
  return { app, store }
}

import { createStore } from 'pinia'

export const useMainStore = createStore(
  // name of the store
  // it is used in devtools and allows restoring state
  'main',
  // a function that returns a fresh state
  () => ({
    counter: 0,
    name: 'Eduardo',
  }),
  // optional getters
  {
    doubleCount: state => state.counter * 2,
  }
)

import { useMainStore } from '@/stores/main'

export default createComponent({
  setup() {
    const main = useMainStore()

    return {
      // gives access to the whole store
      main,
      // gives access to the state
      state: main.state,
      // gives access to specific getter,
    }
  },
})

//単純に
main.state.counter++

//もしくは複数を一気に変更したい場合
main.patch({
  counter: 3,
  name:'hoge'
})

import { computed } from '@vue/composition-api'
import { useUserStore } from './user'
import { useCartStore } from './cart'

export const summary = computed(() => {
  const user = useUserStore()
  const cart = useCartStore()

  return `Hi ${user.state.name}, you have ${cart.state.list.length} items in your cart. It costs ${cart.price}.`
})

import { useUserStore } from './user'
import { useCartStore, emptyCart } from './cart'

export async function orderCart() {
  const user = useUserStore()
  const cart = useCartStore()

  try {
    await apiOrderCart(user.state.token, cart.state.items)
    emptyCart()
  } catch (err) {
    displayError(err)
  }
}

import { pinia } from 'pinia'
import { useUserStore } from './user'
import { useCartStore, emptyCart } from './cart'

export const useCartUserStore = pinia(
  {
    user: useUserStore,
    cart: useCartStore,
  },
  {
    combinedGetter: state =>
      `Hi ${user.state.name}, you have ${cart.state.list.length} items in your cart. It costs ${cart.price}.`,
  }
)

export async function orderCart() {
  const store = useCartUserStore()

  try {
    await apiOrderCart(store.state.user.token, store.state.cart.items)
    emptyCart()
  } catch (err) {
    displayError(err)
  }
}