1. 安装pinia
yarn add pinia
# 或者使用 npm
npm install pinia
# 或者使用 cnpm
cnpm install pinia
2. 项目初始化pinia
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')
3. 创建一个计数器的管理器counter.ts
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0
}),
actions: {
addCount() {
this.count++
}
},
getters:{
countDouble(state){
return state.count * 2
}
}
})
4. setup中使用
<script setup lang="ts">
import { useCounterStore } from '../stores/counter'
const countStore = useCounterStore()
</script>
<template>
<div>
<div>count:{{countStore.count}}</div>
<button @click="countStore.addCount()">增加</button>
</div>
</template>
默认情况下,你可以通过 store 实例访问 state,直接对其进行读写
const countStore = useCounterStore()
//可读写
countStore.count++
//重置 state ,如果使用Setup函数 创建的管理器,该方法无效
countStore.$reset()
//$patch函数可以同一时间更改多个属性
countStore.$patch({count:0,name:'小明'})
//或
countStore.$patch((state) => {
state.count = 0
state.name = '小明'
})