一引入依赖
npm install pinia -S
或者
yarn add pinia
在main.ts中引入
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { createPinia } from 'pinia'
const store = createPinia()
let app = createApp(App)
app.use(store)
app.mount('#app')
import { defineStore } from "pinia";
enum Names {
TEST = 'TEST'
}
export const useTestStore = defineStore(Names.TEST, {
state: () => {
return {
current: 1000,
name: '隔壁老王',
}
},
getters: {
//Getter 完全等同于 Store 状态的 计算值
//getter 不再缓存,它们只是您调用的函数。 但是,您可以在 getter 本身内部缓存一些结果,这并不常见,但应该证明性能更高
},
actions: {
//actions 可以同步
//actions 可以是异步的结合await使用
setCurrent(num:number) {
this.current = num
}
}
})
二修改state的值
<template>
pinia: {{ Test.current }} -- {{ Test.name }}
change:
<button @click="change">change</button>
</template>
<script setup lang="ts">
import { useTestStore } from '../store/index'
const Test = useTestStore()
const change = () => {
//方法一
//Test.current++
//方法二
// Test.$patch({
// current: 888,
// name: '娃娃',
// })
//方法三 常用方式
// Test.$patch((state) => {
// state.current = 999,
// state.name = '郁郁'
// })
//方法四 不常用所有的都要负值
// Test.$state = {
// current: 2000,
// name: '测试'
// }
//方法五 直接调用actions里面方法
Test.setCurrent(123)
}
</script>
<style lang="less" scoped>
</style>
三 storeToRefs解构store
<template>
<div>
pinia: {{ Test.current }} -- {{ Test.name }}
</div>
<div>
{{ current }} --- {{ name }}
change:
<button @click="change">change</button>
</div>
</template>
<script setup lang="ts">
import { useTestStore } from '../store/index'
import { storeToRefs } from 'pinia'
const Test = useTestStore()
//pinia 解构不具有响应式
const { current, name } = storeToRefs(Test) //storeToRefs 响应式
const change = () => {
Test.current++
console.log(current, name)
}
</script>
<style lang="less" scoped>
</style>
四 getters 和 actions
import { defineStore } from "pinia";
enum Names {
TEST = 'TEST',
USER = 'USER'
}
export const useTestStore = defineStore(Names.TEST, {
state: () => {
return {
current: 1000,
name: '隔壁老王',
}
},
getters: {
//Getter 完全等同于 Store 状态的 计算值
//getter 不再缓存,它们只是您调用的函数。 但是,您可以在 getter 本身内部缓存一些结果,这并不常见,但应该证明性能更高
},
actions: {
//actions 可以同步
//actions 可以是异步的结合await使用
setCurrent(num:number) {
this.current = num
}
}
})
type User = {
name: string,
age: number,
}
const Login = ():Promise<User> => {
return new Promise((resolve) => {
setTimeout(() => {
resolve({
name: '飞机',
age: 999
})
}, 2000)
})
}
export const useUser = defineStore(Names.USER, {
state: () => {
return {
user: <User>{},
name: '小飞机'
}
},
getters: {
newName():string {
return `$-${ this.name }-${ this.getUserAge }`
},
getUserAge():number {
return this.user.age
}
},
actions: {
async setUser() {
this.user = await Login()
this.setName('大飞机')
},
setName(name: string) {
this.name = name
}
}
})
五 api调用
<template>
<div>
pinia: {{ User.user }}------{{ User.name }}--------{{ User.newName }}
</div>
<div>
<button @click="change">change</button>
<button @click="reset">reset</button>
</div>
</template>
<script setup lang="ts">
import { useUser } from '../store/index'
const User = useUser()
const change = () => {
User.setUser()
}
//重置reset
const reset = () => {
User.$reset() //您可以通过调用 store 上的 $reset() 方法将状态
}
//可以通过 store 的 $subscribe() 方法查看状态及其变化,类似于 Vuex 的 subscribe 方法。
//与常规的 watch() 相比,使用 $subscribe() 的优点是 subscriptions 只会在 patches 之后触发一次
User.$subscribe((args, state) => {
console.log(args, state, 'xxxxxxx')
})
//调用aciton方法触发
User.$onAction((args) => {
args.after(() => {
console.log('after')
})
console.log(args, 'action')
})
</script>
<style lang="less" scoped>
</style>
六 pinia持久化
安装
npm i pinia-use-persist
main.ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { createPinia } from 'pinia'
import { usePersist } from "pinia-use-persist";
const pinia = createPinia()
let app = createApp(App)
pinia.use(usePersist)
app.use(pinia)
app.mount('#app')
export const useUser = defineStore(Names.USER, {
state: () => {
return {
user: <User>{},
name: '小飞机'
}
},
getters: {
newName():string {
return `$-${ this.name }-${ this.getUserAge }`
},
getUserAge():number {
return this.user.age
}
},
actions: {
async setUser() {
this.user = await Login()
this.setName('大飞机')
},
setName(name: string) {
this.name = name
}
},
persist: {
enabled: true,
encryptionKey: 'my-test',
storage: sessionStorage,
}
})