快速搞懂Pinia及数据持久化存储(详细教程)

阅读本书更多章节>>>>

一.安装及使用Pinia

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

npm install piniayarn add pinia

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

// src/main.tsimport { 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 = useStudySlet { 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持久化存储

数据持久化存储

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-03-26/149173.html，文章来源：网络cs，作者：欧阳逸，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！