Vue3中的vuex—pinia

pinia官网

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持久化储存

1. 用户数据中有一个关键的数据叫做Token （用来标识当前用户是否登录），而Token持续一段时间才会过期
2. Pinia的存储是基于内存的，刷新就丢失，为了保持登录状态就要做到刷新不丢失，需要配合持久化进行存储

持久化存储从后端返回的user数据

持久化插件pinia-plugin-persistedstate

官方文档

案例演示

piniaPluginPersistedState运行机制

在设置state的时候会自动把数据同步给localStorage，在获取state数据的时候会优先从localStorage中取