Pinia 是 Vue 的专属状态管理库,它允许你跨组件或页面共享状态。

三个部分

stategetteraction,我们可以假设这些概念相当于组件中的 data、 computed 和 methods。

使用

在全局注册

import { createPinia } from 'pinia'
 
const app = createApp(App)
app.use(createPinia())
app.mount('#app')

模板

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