要讓元件可以取用 store 內的資料，我們需運用到 mapState() 方法， 若要對該資料進行一些計算的話，可以再搭配 getters

1. mapState()

我們只有單純要取用資料，所以會在元件中的 computed 中使用

// 取用方法
const { createPinia, defineStore, mapState } = Pinia

// 我們定義的 store
const exampleStore = defineStore('exampleStoreId', {
  state: () => {
    return {
      message: 'Pinia Pinia Pinia！'
    }
  }
})

// Vue app
const app = Vue.createApp({})

// 元件
app.component('WelcomeMessage', {
  template: `<p>{{ message }}</p>`,
  computed: {
    // 使用 ... 展開的方式
    // mapState() 第一個參數是我們要取用的 store，第二個參數是我們要取用的資料
    ...mapState(exampleStore, ['message'])
  }
})

const pinia = createPinia();
app.use(pinia);
app.mount('#app');

觀看完整範例：https://codepen.io/hexschool/pen/eYjvRgM?editors=1011

2. 搭配 getters

// 取用方法
const { createPinia, defineStore, mapState } = Pinia

// 我們定義的 store
const exampleStore = defineStore('exampleStoreId', {
  state: () => {
    return {
      message: 'Pinia Pinia Pinia！'
    }
  },
  getters: {
    // 將 state 內資料使用解構方式帶入
    printMessage: ({ message }) => {
      // 可以對資料進行操作
      return 'msg: ' + message
    }
  }
})

// Vue app
const app = Vue.createApp({})

// 元件
app.component('WelcomeMessage', {
  template: `<p>{{ printMessage }}</p>`,
  computed: {
    // 這邊第二個參數是要使用 getters 內的函式名稱
    ...mapState(exampleStore, ['printMessage'])
  }
})

const pinia = createPinia();
app.use(pinia);
app.mount('#app');

觀看完整範例：https://codepen.io/hexschool/pen/LYBWjYV?editors=1011