最新保姆级实现Pinia持久化存储和模块化管理教程

什么是持久化和模块化？

什么是Pinia

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。

详细看官网：pinia.web3doc.top/
什么是持久化存储？

持久化是将程序数据在持久状态和瞬时状态间转换的机制。

通俗：页面刷新，数据不清零
什么是模块化管理？

通过构建多个存储模块，可以让程序自动拆分它们，非常轻巧，轻松写出优雅的存储。

通俗：拆分模块，方便管理，看着好看

一、实现持久化

（1）安装

//控制台
yarn add pinia
yarn add pinia-plugin-persistedstate    

//版本
 "pinia": "^2.0.33",
 "pinia-plugin-persistedstate": "^3.1.0",

pinia-plugin-persistedstate 数据持久化插件，两种写法

使用options API模式定义,vue2的组件模型形式类似
使用setup模式定义主要是用作全局注册

还有一个是pinia-plugin-persist官网seb-l.github.io/pinia-plugi…，两种都可以

（2）具体使用

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

新建src/store/modules/useDemoStore.js

//defineStore()的返回值命名最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾

//Options式写法

import { defineStore } from "pinia";

const useDemoStore = defineStore("demo", {
  state: () => {
    return {
      count: 0,
    };
  },
  getters: {},
  actions: {
    increment() {
      this.count++;
    },
  },
//持久化存储重点---开启
//这个时候数据默认是存在localStorage
  persist: {
    enabled: true,	//开启
    storage:sessionStorage,	//修改存储位置
    key:'userInfo',	//设置存储的key
    paths: ['id'],//指定要长久化的字段
  },
});
 
export default useDemoStore;

//第二种Setup式写法
export const useDemoStore = defineStore('demo', ()=>{
  let count = ref(0)
  let computedTest= computed(() => count.value * 99)
  function add() {
    count.value++
  }
  return { count, computedTest, add}

Store 是用defineStore()定义的，第一个参数是id，第二个参数：Setup函数或Options对象

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

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

actions属性：和vuex的actions差不多的，修改state全局状态数据的。

页面使用

<template>
  <div>
    <p>Count:{{ count }}</p>
    <button @click="add" >Click</button>
  </div>
</template>

<script setup>
import useDemoStore from '@/store/modules/useDemoStore'
import { storeToRefs } from 'pinia';

const store = useDemoStore()
//这样解构的属性将保持响应性
const {count} = storeToRefs(store)
//方法
const add = ()=>{
  store.increment()
}
</script>

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

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

（3）效果展示

二、模块化管理

（1）跟着刚才的继续

新建src/index.js，刚才的文件都是在modules统一管理，就是将他们放在了一块导出

import useGlobalStore from "./modules/global";
import useDemoStore from "./modules/demo";

const useStore = () => ({
  useGlobalStore: useGlobalStore(),
  useDemoStore: useDemoStore(),
});

export default useStore;

页面使用

<template>
  <div>
    <p>Count:{{ count }}</p>
    <button @click="add" >Click</button>
  </div>
</template>

<script setup>
import useStore from '@/store/index'
import { storeToRefs } from 'pinia';

const store = useStore()
const {useDemoStore} = store

const {count} = storeToRefs(useDemoStore)

const add = ()=>{
  useDemoStore.increment()
}
</script>

完结撒花

学废了没有？

参考文章地址：blog.csdn.net/G_ing/artic…

最新保姆级实现Pinia持久化存储和模块化管理教程

最新保姆级实现Pinia持久化存储和模块化管理教程

什么是持久化和模块化？

一、实现持久化

（1）安装

（2）具体使用

（3）效果展示

二、 模块化管理

（1）跟着刚才的继续

完结撒花

二、模块化管理