zzz 发表于 2025-7-10 17:14:51

Pina的基本使用

本帖最后由 zzz 于 2025-7-10 17:29 编辑




安装
yarn add pinia 或 npm install pinia注册 Piniaimport { createPinia } from 'pinia'

app.use(createPinia())
通过defineStore 创建 Storeimport { defineStore } from 'pinia'
export const useUserStore = defineStore("main", {
});stateimport { defineStore } from 'pinia'
const useStore = defineStore('mian', {
// 推荐使用 完整类型推断的箭头函数
state: () => {
    return {
      // 所有这些属性都将自动推断其类型
      counter: 0,
      name: 'Eduardo',
      isAdmin: true,
    }
},
})actionexport const useStore = defineStore('main', {
state: () => ({
    counter: 0,
}),
actions: {
    increment() {
      this.counter++
    },
    randomizeCounter() {
      this.counter = Math.round(100 * Math.random())
    },
},
})
gettersexport const useStore = defineStore('main', {
state: () => ({
    counter: 0,
}),
getters: {
    doubleCount: (state) => state.counter * 2,
},
})
创建具体 Store(组合式 API )import { defineStore } from 'pinia',
const useCounterStore = defineStore('counterStore', {
state: () => ({
    counter: 0
})
})
使用 Store<script setup>
import { useCounterStore } from "@/stores/counter";
// 注意:这里导入的函数,不能被解构,那么会失去响应式。
// 例如不能这样: const { count } = useCounterStore();
const counterStore = useCounterStore();
</script>读取stateconst store = useStore()
store.counter++修改 statestore.$patch({
counter: store.counter + 1,
name: 'Abalam',
})重置 stateconst store = useStore()
store.$reset()替换 state
store.$state = { counter: 666, name: 'Paimon' }

页: [1]
查看完整版本: Pina的基本使用