Pinia简单使用以及数据持久化详解

更新时间：2022年05月30日 09:31:15 作者：壹个切图仔

最近正在使用Pinia进行状态管理,我希望在重新刷新页面时保持状态,下面这篇文章主要给大家介绍了关于Pinia简单使用以及数据持久化的相关资料,需要的朋友可以参考下

基本介绍

Pinia 是 Vue.js 的轻量级状态管理库

官方网站：pinia.vuejs.org/

pinia和vuex4一样，也是vue官方的状态管理工具(作者是 Vue 核心团队成员）
pinia相比vuex4，对于vue3的兼容性更好
pinia相比vuex4，具备完善的类型推荐
pinia同样支持vue开发者工具,最新的开发者工具对vuex4支持不好

pinia核心概念

state: 状态
actions: 修改状态（包括同步和异步，pinia中没有mutations）
getters: 计算属性

基本使用与state

目标：掌握pinia的使用步骤

（1）安装

yarn add pinia
# or
npm i pinia

（2）在main.js中挂载pinia

import { createApp } from 'vue'
import App from './App.vue'

import { createPinia } from 'pinia'
const pinia = createPinia()

createApp(App).use(pinia).mount('#app')

（3）新建文件store/counter.js

import { defineStore } from 'pinia'
// 创建store,命名规则： useXxxxStore
// 参数1：store的唯一表示
// 参数2：对象，可以提供state actions getters
const useCounterStore = defineStore('counter', {
  state: () => {
    return {
      count: 0,
    }
  },
  getters: {
   
  },
  actions: {
    
  },
})

export default useCounterStore

(4) 在组件中使用

<script setup>
import useCounterStore from './store/counter'

const counter = useCounterStore()
</script>

<template>
  <h1>根组件---{{ counter.count }}</h1>
</template>

<style></style>

actions的使用

目标：掌握pinia中actions的使用

在pinia中没有mutations，只有actions，不管是同步还是异步的代码，都可以在actions中完成。

（1）在actions中提供方法并且修改数据

import { defineStore } from 'pinia'
// 1. 创建store
// 参数1：store的唯一表示
// 参数2：对象，可以提供state actions getters
const useCounterStore = defineStore('counter', {
  state: () => {
    return {
      count: 0,
    }
  },
  actions: {
    increment() {
      this.count++
    },
    incrementAsync() {
      setTimeout(() => {
        this.count++
      }, 1000)
    },
  },
})

export default useCounterStore

（2）在组件中使用

<script setup>
import useCounterStore from './store/counter'

const counter = useCounterStore()
</script>

<template>
  <h1>根组件---{{ counter.count }}</h1>
  <button @click="counter.increment">加1</button>
  <button @click="counter.incrementAsync">异步加1</button>
</template>

getters的使用

pinia中的getters和vuex中的基本是一样的，也带有缓存的功能

（1）在getters中提供计算属性

import { defineStore } from 'pinia'
// 1. 创建store
// 参数1：store的唯一表示
// 参数2：对象，可以提供state actions getters
const useCounterStore = defineStore('counter', {
  state: () => {
    return {
      count: 0,
    }
  },
  getters: {
    double() {
      return this.count * 2
    },
  },
  actions: {
    increment() {
      this.count++
    },
    incrementAsync() {
      setTimeout(() => {
        this.count++
      }, 1000)
    },
  },
})

export default useCounterStore

(2)在组件中使用

  <h1>根组件---{{ counter.count }}</h1>
  <h3>{{ counter.double }}</h3>

storeToRefs的使用

目标：掌握storeToRefs的使用

如果直接从pinia中解构数据，会丢失响应式，使用storeToRefs可以保证解构出来的数据也是响应式的

<script setup>
import { storeToRefs } from 'pinia'
import useCounterStore from './store/counter'

const counter = useCounterStore()
// 如果直接从pinia中解构数据，会丢失响应式
const { count, double } = counter

// 使用storeToRefs可以保证解构出来的数据也是响应式的
const { count, double } = storeToRefs(counter)
</script>

pinia模块化

在复杂项目中，不可能把多个模块的数据都定义到一个store中，一般来说会一个模块对应一个store，最后通过一个根store进行整合

（1）新建store/user.js文件

import { defineStore } from 'pinia'

const useUserStore = defineStore('user', {
  state: () => {
    return {
      name: 'zs',
      age: 100,
    }
  },
})

export default useUserStore

(2)新建store/index.js

import useUserStore from './user'
import useCounterStore from './counter'

// 统一导出useStore方法
export default function useStore() {
  return {
    user: useUserStore(),
    counter: useCounterStore(),
  }
}

（3）在组件中使用

<script setup>
import { storeToRefs } from 'pinia'
import useStore from './store'
const { counter } = useStore()

// 使用storeToRefs可以保证解构出来的数据也是响应式的
const { count, double } = storeToRefs(counter)
</script>

pinia数据持久化

目标： 通过 Pinia 插件快速实现持久化存储。

插件文档：点击查看

用法

安装

yarn add pinia-plugin-persistedstate
or
npm i  pinia-plugin-persistedstate

使用插件 在main.ts中注册

import { createApp } from "vue";
import App from "./App.vue";
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
createApp(App).use(pinia);

模块开启持久化

const useHomeStore = defineStore("home",{
  // 开启数据持久化
  persist: true
  // ...省略
});

常见疑问

模块做了持久化后，以后数据会不会变，怎么办？
- 先读取本地的数据，如果新的请求获取到新数据，会自动把新数据覆盖掉旧的数据。
- 无需额外处理，插件会自己更新到最新数据。

进阶用法

需求：不想所有数据都持久化处理，能不能按需持久化所需数据，怎么办？

可以用配置式写法，按需缓存某些模块的数据。

import { defineStore } from 'pinia'

export const useStore = defineStore('main', s{
  state: () => {
    return {
      someState: 'hello pinia',
      nested: {
        data: 'nested pinia',
      },
    }
  },
  // 所有数据持久化
  // persist: true,
  // 持久化存储插件其他配置
  persist: {
    // 修改存储中使用的键名称，默认为当前 Store的 id
    key: 'storekey',
    // 修改为 sessionStorage，默认为 localStorage
    storage: window.sessionStorage,
    // 部分持久化状态的点符号路径数组，[]意味着没有状态被持久化(默认为undefined，持久化整个状态)
    paths: ['nested.data'],
  },
})

总结：相比于vuex，pinia对于typescript的支持性更好，友好的devTools支持，pinia只有1kb，简化了很多方法的写法。

总结

到此这篇关于Pinia简单使用以及数据持久化详解的文章就介绍到这了,更多相关Pinia数据持久化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

利用vue控制元素的显示与隐藏
大家都知道在vue中我们可以使用v-if或者v-show去做隐藏显示,下面这篇文章主要给大家介绍了关于如何利用vue控制元素的显示与隐藏的相关资料,需要的朋友可以参考下
2022-12-12
VUE+elementui面包屑实现动态路由详解
今天小编就为大家分享一篇VUE+elementui面包屑实现动态路由详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
前端不用跑项目vscode组件效果所见即所得
这篇文章主要为大家介绍了一款不用跑项目的vscode组件所见即所得效果的使用方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-04-04
Vue使用Canvas生成随机大小且不重叠圆
Canvas是HTML5中新增的元素,专门用来绘制图形,下面这篇文章主要给大家介绍了关于Vue使用Canvas生成随机大小且不重叠圆的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2021-11-11
Vue配置代理(devServer)解决跨域问题
这篇文章主要介绍了Vue配置代理(devServer)解决跨域问题,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-08-08
vue项目中如何配置env环境的实现
本文主要介绍了vue项目中如何配置env环境的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-07-07
解决vue安装less报错Failed to compile with 1 errors的问题
这篇文章主要介绍了解决vue安装less报错Failed to compile with 1 errors的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
vant中的Cascader级联选择异步加载地区数据方式
这篇文章主要介绍了vant中的Cascader级联选择异步加载地区数据方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
vue实现动态路由添加功能的简单方法(无废话版本)
ue动态路由(约定路由),听起来好像很玄乎的样子,但是你要是理解了实现思路,你会发现没有想象中的那么难,下面这篇文章主要给大家介绍了关于vue实现动态路由添加功能的简单方法,需要的朋友可以参考下
2023-02-02
vue中input的v-model清空操作
这篇文章主要介绍了vue中input的v-model清空操作，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-09-09