pinia的使用及说明

一、pinia是什么？pinia和vuex的区别？

说白了就是状态管理库，在我的理解为就是vuex的升级版，正常来说vue2和vue3配套的是vuex3和vuex4，我理解就是在vuex4在做一次升级vuex5也就是pinia。

其实都是同样的团队创造出来的只不过换个名字

---

 

1.1pinia和vuex有啥区别首先要知道vuex和pinia原理图

vuex：                                                                                                                                                                      pinia：

 

 

 从上面工作原理我们可以看出pinia出来之后要比vuex4简化了很多，从这两张图看出他们的区别很明显

接下来我大概总结一下他们之间的区别：

1. 从上面的图看出pinia取消了mutations，只有state、action是
2. pinia分模块不需要modules
3. pinia体积小
4. pinia可以直接修改数据，vuex需要mutations修改
   

---

二、Pinia安装

2.1这里我放了两种安装方式

npm i pinia
or
yarn add pinia

2.2Pinia使用

在使用之前我先说个场景，也是vuex的一个问题就是数据持久化，我们在使用vuex或者现在我写的pinia文章都会有数据持久化的问题，针对解决我们通常用以下两种方式

1.配合localStrorage或者sessionStorage解决
2.使用插件vuex-persistedstate

2.3Pinia持久化存储插件

2.3.1安装方式

npm i pinia-plugin-persist --save

2.4介绍如何使用

在这里多说一句因为vuex存在modules，如何在Pinia中也使用呢？

我直接将上面的问题还有使用全部融合了仅供参考

2.4.1 main.js

import store from './store'

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

2.4.2 /store/index.js

import { createPinia } from "pinia";
//引入pinia的持久化组件
import piniaPluginPersist from 'pinia-plugin-persist'

const store = createPinia()

store.use(piniaPluginPersist)

export default store

2.4.3 /store/xxx.js

举个例子user.js

import { defineStore } from 'pinia'

export const user = defineStore('user', {
  state: () => {
    return {
    }
  },
  getters: {
  },
  actions: {
  },
  //开启数据缓存 默认是数据全部存储
  persist: {
    enabled: true,
　　//根据需要是否配置localstorage，默认是session
    strategies: [
      {
        key: 'my_user',
        storage: localStorage,
        paths: ['name']//配置需要持久存储的模块
      }
    ]
  }
})

2.4.4 xxx.vue文件

//数据响应式需要storeToRefs
import { storeToRefs } from 'pinia'
import { user } from '../store/user'
let userStore = user()
//解构数据
let { xxx } = storeToRefs(userStore)
//...后续逻辑

2.5.5总结

如果处理数据需要批量处理

 

懒得码字了直接给个图片

 

结尾：你活着一天,你就得战斗一天,你就得努力一天。---rabbit_student