[Vue3 + typescript] pinia

VUE.JS 목록

pinia 설치 확인

Quasar cli로 프로젝트 생성시 pinia 옵션을 추가했습니다.

 

 

 

 

 

 

stores/counter-store.ts

import { defineStore } from 'pinia'

export const counterStore = defineStore('main', {
  state: () => ({
    counter: 0,
    name: 'romeoh'
  }),
  getters: {
    doubleCount: state => {
      return state.counter * 2
    }
  },
  actions: {
    reset () {
      this.counter = 0
    },
    addOne () {
      this.counter++
    }
  }
})

store 파일을 생성합니다.

 

 

 

 

 

 

 

pinia 사용하기

<template>
  <q-page>
    hello
    {{ name }}: {{ counter }} : {{ doubleCount }}
    <q-btn @click="addOne">
      addOne
    </q-btn>
    <q-btn @click="add(15)">
      add
    </q-btn>
    <q-btn @click="reset">
      reset
    </q-btn>
    <q-btn @click="update">
      update
    </q-btn>
  </q-page>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { counterStore } from 'stores/counter-store'

const main = counterStore()

const { counter, name, doubleCount } = storeToRefs(main)
const { addOne } = main

function add (value: number) {
  main.$patch(state => {
    state.counter += value
  })

  // 또는
  // main.$patch({
  //   counter: counter.value + value
  // })
}

function reset () {
  main.$reset()
}

function update () {
  main.$state = { counter: 900, name: 'korea' }
}

main.$subscribe((mutation, state) => {
  console.log('mutation', mutation)
  console.log('state', state)
})
</script>

 

 

 

 

 

 

 

 

 

 

VUE.JS 목록