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]