文章目录
pinia官网
使用指导
简单来说pinia就是vue3中用来代替vue2中的vuex的,而且更加简化了开发,舍去了mutation和mudule
安装
npm install pinia
创建store文件
import {defineStore} from "pinia";
import {ref} from "vue";
export const useCounterStore = defineStore('counter',()=>{
//定义数据(state)
const count = ref(0)
//定义修改数据的方法 (action 同步 + 异步)
const increment = () => {
count.value++
}
//以对象的方式return供组件使用
return{
count,
increment
}
})
main.js中引用
//1.导入1createPinia
import {createPinia} from 'pinia'
//2.执行方法得到实例
const pinia = createPinia()
//3.把pinia实例加入到app应用中
createApp(App).use(pinia).mount('#app')
App.vue中尝试
<!--setup-开关:允许在script书写组合式API-->
<script setup>
//得到store实例对象
import {useCounterStore} from "@/stores/counter";
const counterStore = useCounterStore()
console.log(counterStore)
</script>
<template>
<button @click="counterStore.increment()">{{ counterStore.count }}</button>
</template>
实现getter
使用computed
//getter定义
const doubleCount = computed(() => count.value * 2)
storeToRefs解构赋值
原本代码
<button @click="counterStore.increment()">{{ counterStore.count }}</button>
{{counterStore.doubleCount}}
解构赋值后
<button @click="increment()">{{ count }}</button>
{{doubleCount}}
解析方法
//方法包裹(保持响应式更新),负责数据相关的解构赋值
const {count,doubleCount} = storeToRefs(counterStore)
//原本写法可以解析方法,但是解析不了数据
const {increment} = counterStore
pinia持久化储存
- 用户数据中有一个关键的数据叫做Token (用来标识当前用户是否登录),而Token持续一段时间才会过期
- Pinia的存储是基于内存的,刷新就丢失,为了保持登录状态就要做到刷新不丢失,需要配合持久化进行存储
持久化存储从后端返回的user数据
持久化插件pinia-plugin-persistedstate
案例演示
piniaPluginPersistedState运行机制
在设置state的时候会自动把数据同步给localStorage,在获取state数据的时候会优先从localStorage中取