Open3

メモ Proven Pinia Patterns - VueCOnf US 2023

上かるび上かるび

State with v-model

storeToRefs と v-model の併用

<script setup>
import {useGeoLocationStore } from '../stores/geolocation';
const geoLocationStore = useGeoLocationStore();
const { city } = storeToRefs(geoLocationStore);
</script>

<template>
  <div>
    <label for="search-city">City:</label>
    <input v-model="city" placeholder="'Loading your city...'" />
  </div>
</template>
上かるび上かるび

様々なメソッド

$patch

複数の変更ができる。

store.$patch({
  counter: store.counter +1,
  name: 'Adam'
)

$reset

actions: {
  logout(){
    this.$reset()
    router.push('/')
  }
}

<button v-if="user && user.username" @click="authStore.$reset()">
  Logout
</button>

setup store で使いたい場合は、自前で用意する必要がある。

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)

  function $reset() {
    count.value = 0
  }

  return { count, $reset }
})