pinia (2) 建立 store

發表於 更新於
建立 store 資料中心

建立 store

在專案根目錄建立 store.js 作為 pinia 的資料儲存中心。
我們使用 defineStore方法來建立 store，第一個參數是這個store的名字，第二個參數則傳入物件，
裡面包含

  • stste: 資料
  • getters: 資料產生的資料
  • actions: 方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// store.js

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0, name: 'Eduardo' }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

使用 store

store 建立好後可以在不同元件內使用

1
2
3
4
5
6
<script setup>
import { useCounterStore } from '@/stores/counter'

// access the `store` variable anywhere in the component ✨
const store = useCounterStore()
</script>