Pinia的使用技巧

一、安装

npm install pinia

二、main.ts引入

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'const app = createApp(App)
app.use(createPinia())
app.mount('#app')

三、定义参数

import { defineStore } from 'pinia'type User = {name: string,age: number
}const peo: User = {name: 'cqs',age: 23
}const login = (): Promise<User> => {return new Promise(resolve => {setTimeout(() => {resolve(peo)}, 2000)})
}export const useTestStore = defineStore('user', {state: () => {return {name: 'cqs',age: 23,user: <User>{}}},getters: {getNewName():string {return `好名字：${this.name}-${this.getAge}`},getAge():number {return this.age}},actions: {setName(name: string) {this.name = name;},async setUser() {const user = await login()this.user = user}}
})

四、store使用

1.直接获取

<script setup lang="ts">
import { useTestStore } from '../store'const user = useTestStore();console.log(user.age)
</script>

2.通过storeToRefs 获取

<script setup lang="ts">
import { storeToRefs } from 'pinia'
const { name, age } = storeToRefs(user)
</script>

3.$patch修改

<script setup lang="ts">
import { useTestStore } from '../store'const user = useTestStore();user.$patch({name: '123'
})
user.$patch((state)=>{state.name = '456'
})
</script>

4.直接修改

<script setup lang="ts">
import { useTestStore } from '../store'const user = useTestStore();user.name = '123'
</script>

5.通过$state修改

<script setup lang="ts">
import { useTestStore } from '../store'const user = useTestStore();
//重写需要参数都传
user.$state = {name: 'qwe',age: 234,user: {name: '123',age: 23}}
</script>

五、回滚数据

<script setup lang="ts">
import { useTestStore } from '../store'const user = useTestStore();user.$reset()
</script>

六、监听数据变化

<script setup lang="ts">
import { useTestStore } from '../store'const user = useTestStore();//监听数据改变
user.$subscribe((args, state)=>{console.log(args);console.log(state);
}, {detached: true, //页面销毁，方法不会销毁deep: true,flush: 'post'
})//监听调用actions，第二个参数true页面销毁，方法不会销毁
user.$onAction((args)=>{args.after(()=>{console.log('监听调用数据改变之后');})console.log(args);
}, true)
</script>

七、添加浏览器缓存，避免刷新页面数据消失

修改main.ts

import { createApp, toRaw } from 'vue'
import App from './App.vue'
import { createPinia, PiniaPluginContext } from 'pinia'const app = createApp(App)type Option = {key: string
}const PiniaPlugin = (option: Option) => {return (context: PiniaPluginContext) => {const { store } = context;const data = localStorage.getItem('pinia-' + option.key + store.$id);store.$subscribe(() => {localStorage.setItem('pinia-' + option.key + store.$id, JSON.stringify(toRaw(store.$state)))})return {...(data ? JSON.parse(data) : {})}}
}const store = createPinia();
store.use(PiniaPlugin({ key: 'cqs' }))
app.use(store)
app.mount('#app')