数据库持久化什么意思（快速搞懂Pinia及数据持久化存储(详细教程)）

一.安装及使用Pinia

1.安装Pinia两种方式都可
  
  
  
  
  ，根据个人习惯来

npm install pinia yarn add pinia

2.在main.ts 中引入并挂载到根实例

// src/main.ts import { createApp } from vue import App from ./App.vue import { createPinia } from pinia // 创建Vue应用实例 // 实例化 Pinia // 以插件形式挂载Pinia实例 createApp(App).use(createPinia()).mount(#app)

3.src目录下新建store/study/index.js并写入

Store 是用defineStore()定义的 
  
  
  
  
，它的第一个参数是一个独一无二的id 


 


 


 


 

，也是必须传入的
 
 
 
 
 ，Pinia 将用它来连接 store 和 devtools         。

defineStore()第二个参数可接受两类值：Setup函数或Options对象

state 属性： 用来存储全局的状态的  
   
   
   
   
，这里边定义的 

 

 

 

 
，就可以是为SPA里全局的状态了  
 
  
 
  
 
  
 
  
 。

getters属性：用来监视或者说是计算状态的变化的

 

 

 

 

 ，有缓存的功能









。

actions属性：对state里数据变化的业务逻辑         ，需求不同 
 

 
 

 
 

 
 

 
 
，编写逻辑不同
  
  
  
  
 。说白了就是修改state全局状态数据的  
  
  
  
  。

第一种Options式写法：

import { defineStore } from pinia // `defineStore()` 的返回值命名最好使用 store 的名字









，同时以 `use` 开头且以 `Store` 结尾 export const useStudyStore = defineStore(studyId, { state: () => { return { counter: 0, } }, getters:{}, actions:{} })

在Options式中:Store 的数据(data)              ，getters 是 Store 的计算属性(computed) 
 
 
 
 
 
 
 
 
 
，而actions则是 Store 的方法（methods）
 


 


 


 


 

。

第二种Setup式写法：

import { defineStore } from pinia // `defineStore()` 的返回值命名最好使用 store 的名字













，同时以 `use` 开头且以 `Store` 结尾 export const useStudyStore = defineStore(studyId, ()=>{ const count = ref(0) const name = ref(Ghmin) const computedTest= computed(() => count.value * 99) function int() { count.value++ } return { count, name, computedTest, int} })

在Setup式中：ref()成为state属性          ，computed()变成getters,function变成actions

4.使用Store

使用上面两种方式其中一种后 
 
  
 
  
 
  
 
  
 
，便可以在组件中使用Store了
 
 
 
 
。

<script setup> import { useStudyStore } from @/stores/study const store = useStudyStore(); </script>

二.具体使用及属性与方法

1.定义数据

import { defineStore } from pinia export const useStudyStore = defineStore(studyId, { state: () => { return { name: Ghmin, num:0 } }, })

2.组件中使用

<template> <div> <h1>vue组件</h1> {{ name }} </div> </template> <script setup> import { useStudyStore } from @/stores/study const store = useStudyStore(); let { name } = store; </script>

注：pinia可以直接修改state数据








，无需像vuex一样通过mutations才可以修改
  
  
  
  
  ，所以上面的let { name } = store 这种解构是不推荐的 
  
  
  
  
，因为它破坏了响应性   
   
   
   
   。

而为了从 Store 中提取属性 


 


 


 


 

，同时保持其响应性
 
 
 
 
 ，这里需要使用storeToRefs()  
   
   
   
   
，它将为每个响应性属性创建引用
 

 

 

 

 
。当你只使用 Store 的状态而不调用任何action时 

 

 

 

 
，它会非常有用

 

 

 

 

。使用方法如下

<template> <div> <h1>vue组件</h1> {{ name }} </div> </template> <script setup> //这里需要先引入 import { storeToRefs } from pinia import { useStudyStore } from @/stores/study const store = useStudyStore(); //这样解构的属性将保持响应性 let { name } = storeToRefs(store); // name.value 可以直接修改到Store中存储的值 </script>

如果有多条数据要更新状态

 

 

 

 

 ，推荐使用$patch方式更新          。因为Pinia的官方网站         ，已经明确表示$ patch的方式是经过优化的 
 

 
 

 
 

 
 

 
 
，会加快修改速度









，对程序的性能有很大的好处
 
 

 
 

 
 

 
 

 
 。

<template> <div> <h1>A组件</h1> {{ num}} {{ arr }} <button @click=btn>按钮</button> </div> </template> <script setup> import { storeToRefs } from pinia import { useStudyStore } from @/stores/study const store = useStudyS let { num,arr } = storeToRefs(store); const btn = ()=>{ //批量更新 store.$patch(state=>{ state.num++; state.arr.push({name:Ghmin}); }) } </script>

actions:对state里数据变化的业务逻辑              ，需求不同 
 
 
 
 
 
 
 
 
 
，编写逻辑不同









。说白了就是修改state全局状态数据的              。

import { defineStore } from pinia export const useStudyStore = defineStore(studyId, { state: () => { return { num: 0 } }, getters:{}, actions:{ changeNum( val ){ this.num+= val; } } }) <template> <div> <h1>使用actions</h1> {{ num}} <button @click=add>加99</button> </div> </template> <script setup> import { storeToRefs } from pinia import { useStudyStore } from @/stores/study const store = useStudyStore(); let { num} = storeToRefs(store); const add = ()=>{ store.changeNum(10); } </script>

getters:和vuex的getters几乎类似













，用来监视或者说是计算状态的变化的          ，有缓存的功能 
 
 
 
 
 
 
 
 
 。

import { defineStore } from pinia export const useStudyStore = defineStore(studyId, { state: () => { return { num: 0, } }, getters:{ numGetters(){ return this.counter + 999; } }, actions:{} }) <template> <div> <h1>getters的使用</h1> {{ num}} {{ numGetters}} </div> </template> <script setup> import { storeToRefs } from pinia import { useStudyStore } from @/stores/study const store = useStudyStore(); let { num,numGetters} = storeToRefs(store); </script>

三.数据持久化存储

使用pinia-plugin-persist实现数据持久化存储 
 
  
 
  
 
  
 
  
 
，具体使用请跳转Pinia持久化存储

http://t.csdn.cn/N8l9c