【VUE】Vue3项目中Pinia状态管理工具的使用_vue3 使用pinia(1)

🐱 个人主页：不叫猫先生
🙋‍♂️ 作者简介：2022年度博客之星前端领域TOP 2，前端领域优质作者、阿里云专家博主，专注于前端各领域技术，共同学习共同进步，一起加油呀！
💫优质专栏：vue3 + vite + TypeScript 从入门到实践
📢 资料领取：前端进阶资料可以找我免费领取
🔥 摸鱼学习交流：我们的宗旨是在工作中摸鱼，摸鱼中进步，期待大佬一起来摸鱼(文末有我wx或者私信)。

目录

• • 一、Pinia与Vuex的区别
    • 二、使用Pinia
    • 三、直接修改数据的两种方式
    • 四、使用actions修改数据
    • 五、重置state中数据
    • 六、Pinia持久化存储
    • 七、Pinia模块化实现
    • 八、Pinia中store之间互相调用

Pinia官网介绍说：Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。Vuex同样可以作为状态管理工具，那么两者有什么区别呢？

一、Pinia与Vuex的区别

• pinia只有store、getter、actions，么有mutations，简化了状态管理的操作
• pinia模块划分不需要modules，
• pinia自动化代码拆分
• pinia对ts支持很好以及vue3的composition API
• pinia体积更小，性能更好

二、使用Pinia

defineStore( ) 方法的第一个参数：容器的名字，名字必须唯一，不能重复
defineStore( ) 方法的第二个参数：配置对象，放置state，getters，actions
state 属性： 用来存储全局的状态
getters属性： 用来监视或者说是计算状态的变化的，有缓存的功能
actions属性： 修改state全局状态数据，可以是异步也可以是同步
Pinia可以用于vue2.x也可以用于vue3.x中

• 安装

yarn add pinia -S

• main.js引入

import {createApp} from "vue"
import App from "./app.vue"
import store from "./store/index.js"
const app = createApp(App);
import { createPinia } from "pinia";
const store = createPinia();
app.use(store).mount("#app")

• 在store文件夹下新建test.js

import {definePinia} from "pinia"
export default testStore = definePinia('testId',{
    state:()=>{
         tname:"test",
         tnum:0,
    },
    getters:{
       changeTnum(){
           console.log("getters")
           this.tnum++;
       }
    },
    actions:{
       addNum(val){
          this.tnum += val
       }
    },
    //持久化存储配置
    presist:{
         enable:true,//
         strategies:[
            {
            key:"testId",
            storage:localStorage,
            paths:['tnum']
            } 
         ]
    }
})

在用actions的时候，不能使用箭头函数，因为箭头函数绑定是外部的this。actions里的this指向当前store

• 在store文件夹下新建index.js，便于管理

import {createPinia} from "pinia"
const store = createPinia();
export default store

• 新建A.vue组件，引入store模块和storeToRefs方法
  storeToRefs：解构store中的数据，使之成为响应式数据

<template>
    <div>
        <div> {{tname}}</div>
        <div> {{tid}}</div>
        <div> tnum: {{tnum}}</div>
        <div> {{tchangeNum}}</div>
        <div><button @click="tchangeName">修改</button></div>
        <div> <button @click="treset">重置</button></div>
        <div @click="actionsBtn">actionsBtn</div>
    </div>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store/user'
import { useTest } from '../store/test.js'
const testStore = useTest();
let { tname, tchangeNum, tnum } = storeToRefs(testStore)
</script>

三、直接修改数据的两种方式

直接修改数据与使用$path修改数据相比，官方已经明确表示$patch的方式是经过优化的，会加快修改速度，对程序的性能有很大的好处。所以如果你是多条数据同时更新状态数据，推荐使用$patch方式更新。
虽然可以直接修改，但是出于代码结构来说， 全局的状态管理还是不要直接在各个组件处随意修改状态，应放于actions中统一方法修改（piain没有mutation）。

//直接修改数据
tchangeName(){
     tname.value = "测试数据"；
     tnum.value++;
}
//当然也可以使用`$path`批量修改
tchangeName(){
     testStore.$path(state=>{
          state.tname = "测试数据"；
          state.value = 7;
     })
}

四、使用actions修改数据

直接调用actions中的方法，可传参数

const actionsBtn = (){
      testStore.addNum(5)  
}

五、重置state中数据

store中有$reset方法，可以直接对store中数据重置

const treset = (){
    testStore.$reset()
}

六、Pinia持久化存储

总结

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！