1. 在 main.js
中引入 Pinia
import { createPinia } from 'pinia'
const pinia = createPinia()
app.use(pinia)
2. 定义一个 Store
import { defineStore } from "pinia";
import { ref } from "vue"
export const userCounterStore = defineStore('counter', {
state: () => {
return {
count: 0
}
},
getters: {
count() {
return this.count
}
},
actions: {
increment() {
this.count++
}
}
})
export const userCounterStore = defineStore('counter', () => {
const count = ref(0)
function increment() {
count.value++
}
return { count, increment }
})
3. 在组件中使用
<script setup>
import { useCounterStore } from '@/stores/counter'
const counterStore = useCounterStore()
// 以下三种方式都会被 devtools 跟踪
counterStore.count++
counterStore.$patch({ count: counterStore.count + 1 })
counterStore.increment()
</script>
<template>
<div>{{ counterStore.count }}</div>
<div>{{ counterStore.doubleCount }}</div>
</template>
4. 由于 store
是一个用 reactive
包裹的对象,直接解构会失去响应性。可以使用需要用 storeToRefs
方法包裹 store
对象,如
<script setup>
import { storeToRefs } from 'pinia'
import { useCounterStore } from '@/stores/counter'
const counterStore = useCounterStore()
const { count, doubleCount } = storeToRefs(counterStore)
</script>
<template>
<div>{{ count }}</div>
<div>{{ doubleCount }}</div>
</template>
5. 修改 store
状态
<script setup>
import { useCounterStore } from '@/stores/counter'
const counterStore = useCounterStore();
// 参数类型1:对象
counterStore.$patch({
name: hello pingan8787 ,
age: 18 ,
addr: xiamen ,
})
// 参数类型2:方法,该方法接收 store 中的 state 作为参数
counterStore.$patch(state => {
state.name = hello pingan8787 ;
state.age = 18 ;
state.addr = xiamen ;
})
</script>
6. 实现本地存储
npm i pinia-plugin-persist
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
const pinia = createPinia()
pinia.use(piniaPluginPersist)
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 1 }),
persist: {
enabled: true,
strategies: [
{
key: 'myCounter',
storage: localStorage,
paths: ['name', 'age'],
}
]
}
})