vue 状态管理插件Pinia 学习第一篇

目录

pinia 是什么？

1.pinia 的优势

2.在项目中安装pinia

3.在store 中引用

4.main.ts 中引用

5.定义状态仓库

6.如何调用

7.数据持久化

---

pinia 是什么？

pinia 是一个轻量级的状态管理工具（vuex  作用类似 ）（pinia和vuex 是同一团团开发，官方文档地址：Pinia 中文文档），尤雨溪大佬说以后推介使用pinia组件，那其中肯定是有它自己独特的优势，接下来学习一波......

1.pinia 的优势

1. vue3、vue2 都支持
2. 抛弃了MUtations  的操作，只有state、getters和actions
3. 不需要嵌套模块，符合vue3的Compostition api
4. 更完善的 typescript 支持，无需创建自定义复杂的包装类型来支持 TypeScript，所有内容都是类型化的，并且 API 的设计方式尽可能利用 TS 类型推断
5. 更简单的写法，代码更清晰简洁，支持 和 语法
6. 非常轻量，只有1kb的大小

2.在项目中安装pinia

 npm install pinia

3.在store 中引用

4.main.ts 中引用

import store from "./store";
app.use(store).use(router).use(ElementPlus).mount("#app");

5.定义状态仓库

 // src/store/index.ts
 // 引入仓库定义函数
 import { defineStore } from 'pinia'
 // 传入2个参数，定义仓库并导出
 // 第一个参数唯一不可重复，字符串类型，作为仓库ID以区分仓库
 // 第二个参数，以对象形式配置仓库的state,getters,actions
 // 配置 state getters actions
 export const mainStore = defineStore('main', {
   // state 类似组件的data选项，函数形式返回对象
   state: () => {
     return {
       msg: 'hello world!',
       counter: 0
     }
   },
   getters: {},
   actions: {}
 })

6.如何调用

<template>
   <button @click="handleClick">修改状态数据</button>
    <!-- 模板内不需要加.value -->
     <p>{{store.counter}}</p>
     <!-- 或者使用解构之后的 -->
     <p>{{counter}}</p>
 </template>
 ​
 <script setup>
 // 导入状态仓库
 import { mainStore } from "../store/index.ts";
 // 使普通数据变响应式的函数  
 import { storeToRefs } from "pinia";
 // 实例化仓库
 const store = mainStore();
 // 解构并使数据具有响应式
 const { counter } = storeToRefs(store);
 ​
 // 点击 + 1;
 function handleClick() {
   // ref数据这里需要加.value访问
   counter.value++;
 }
 </script>

7.数据持久化

npm i pinia-plugin-persist

 // src/store/index.ts
 // 引入仓库定义函数
 import { defineStore } from 'pinia'
 // 传入2个参数，定义仓库并导出
 // 第一个参数唯一不可重复，字符串类型，作为仓库ID以区分仓库
 // 第二个参数，以对象形式配置仓库的state,getters,actions
 // 配置 state getters actions
 export const mainStore = defineStore('main', {
   // state 类似组件的data选项，函数形式返回对象
   state: () => {
     return {
       msg: 'hello world!',
       counter: 0
     }
   },

  persist: {
    enabled: true, // 开启缓存  默认会存储在本地localstorage
    storage: sessionStorage, // 缓存使用方式
    paths:[] // 需要缓存键 
  },

   getters: {},
   actions: {}
 })