【小番茄夫斯基】Pinia状态管理

2023-05-16

Pinia是尤雨溪强烈推荐的一款Vue状态管理工具，也被认为是下一代Vuex的替代产品。即Vuex5.x，在Vue3.0的项目中使用也是备受推崇。

优点

pinia没有mutations，只有：state、getters、actions。
pinia分模块不需要modules（之前vuex分模块需要modules）。
pinia体积更小（性能更好）。
pinia可以直接修改state数据。

一，pinia的安装

1.1安装下载

yarn add pinia
# or with npm
npm install pinia

1.2main.js引入

import { createPinia } from 'pinia'

app.use(createPinia())

1.3 在根目录下新建store/index.js中写入

import { defineStore } from 'pinia'

export const useStore = defineStore('storeId', {
  state: () => {
    return {
      num: 0,
    }
  },
  getters:{},
  actions:{}
})

1.4 在组件中使用

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

二，pinia中 state的用法

2.1 Pinia定义state数据

import { defineStore } from 'pinia'
export const useStore = defineStore('storeId', {
  state: () => {
    return {
      name: '前端诡刺',
      age: 18,
      sex: '男',
    }
  },
  getters:{},
  actions:{}
})

2.2 组件使用pinia的state数据

<template>
 <div>
  <h1>A组件</h1>
  {{ name }}
 </div>
</template>
<script setup>
import { useStore } from '../store'
const store = useStore();
let { name } = store;
</script>

2.3 组件修改pinia的state数据

本身pinia可以直接修改state数据，无需像vuex一样通过mutations才可以修改，但是上面写的let { name } = store;这种解构是不可以的，所以要换解构的方式。

<template>
 <div>
  <h1>A组件</h1>
  {{ name }}
  <button @click='btn'>按钮</button>
 </div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { name }  = storeToRefs(store);
const btn = ()=>{
 name.value = '前端菜鸟';
}
</script>

2.4 如果state数据需要批量更新

store/index.js

import { defineStore } from 'pinia'
export const useStore = defineStore('storeId', {
  state: () => {
    return {
      name: '前端诡刺',
      age: 18,
    }
  },
  getters:{},
  actions:{}
})

组件代码

<template>
 <div>
  <h1>A组件</h1>
  {{ name }}
  {{ age }}
  <button @click='btn'>按钮</button>
 </div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { name,age }  = storeToRefs(store);
const btn = ()=>{
 //批量更新
 store.$patch(state=>{
  state.name = '前端菜鸟';
  state.age = 20;
 })
}
</script>

三，pinia中 actions 的使用

actions相当于methoads，里面可以写方法,例如写个带参数的加等方法

store/index.js

import { defineStore } from 'pinia'
export const useStore = defineStore('storeId', {
  state: () => {
    return {
      num: 0
    }
  },
  getters:{},
  actions:{
   changeNum( val ){
    this.num += val;
   }
  }
})

组件中使用

<template>
 <div>
  <h1>A组件</h1>
  {{ num }}
  <button @click='add'>+1</button>
 </div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { num }  = storeToRefs(store);
const add = ()=>{
 store.changeNum(1);
}
</script>

四，pinia中 getters 的使用

getters相当于computed，可以对数据进行处理

import { defineStore } from 'pinia'
export const useStore = defineStore('storeId', {
  state: () => {
    return {
      num: 0,
    }
  },
  getters:{
   numAdd(){
    return this.num + 1;
   }
  },
  actions:{}
})

组件中使用

<template>
 <div>
  <h1>A组件</h1>
  {{ num }}
  {{ num }}
  {{ numAdd }}
 </div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { num, numAdd }  = storeToRefs(store);
</script>

以上是Pinia的使用方法，有一个问题就是页面刷新后，所有的数据都会恢复成默认状态，为了解决这个问题，接下来给大家介绍一款数据持久化插件（pinia-plugin-persist

pinia-plugin-persist

一、安装插件

npm i pinia-plugin-persist --save

二、使用

store/index.js

import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
store.use(piniaPluginPersist)
export default store

store/user.js

export const useUserStore = defineStore({
  id: 'user',
  state: () => {
    return {
      name: '前端诡刺'
    }
  },
  // 开启数据缓存
  persist: {
    enabled: true
  }
})

三、自定义储存方式及key值

store/user.js

export const useUserStore = defineStore({
  id: 'user',
  state: () => {
    return {
      name: '前端诡刺'
    }
  },
  // 开启数据缓存
  persist: {
    enabled: true,
    strategies: [
    {
      key: 'myUser',//储存到浏览器中的key值，默认会以store的id作为key
      storage: localStorage,//储存方式不指定的话默认储存sessionStorage中
    }
  ]
  }
})

四、持久化局部state

默认所有 state 都会进行缓存，你能够通过 paths 指定要长久化的字段，其余的则不会进行长久化。

store/user.js

export const useUserStore = defineStore({
  id: 'user',
  state: () => {
    return {
      name: '前端诡刺',
      age:18,
      sex:'男'
    }
  },
  // 开启数据缓存
  persist: {
    enabled: true,
    strategies: [
    {
      storage: localStorage,
      paths: ['name', 'age']
    }
  ]
  }
})

pinia和vuex的区别

pinia它没有mutation,他只有state，getters，action【同步、异步】使用他来修改state数据
pinia他默认也是存入内存中，如果需要使用本地存储，在配置上比vuex麻烦一点
pinia语法上比vuex更容易理解和使用，灵活。
pinia没有modules配置，没一个独立的仓库都是definStore生成出来的
pinia state是一个对象返回一个对象和组件的data是一样的语法

Vuex 和 Pinia 的优缺点

Pinia的优点

完整的 TypeScript 支持：与在 Vuex 中添加 TypeScript 相比，添加 TypeScript 更容易
极其轻巧(体积约 1KB)
store 的 action 被调度为常规的函数调用，而不是使用 dispatch 方法或 MapAction 辅助函数，这在 Vuex 中很常见
支持多个Store
支持 Vue devtools、SSR 和 webpack 代码拆分

Pinia的缺点

不支持时间旅行和编辑等调试功能

Vuex的优点

支持调试功能，如时间旅行和编辑
适用于大型、高复杂度的Vue.js项目

Vuex的缺点

从 Vue 3 开始，getter 的结果不会像计算属性那样缓存
Vuex 4有一些与类型安全相关的问题

何时使用Pinia，何时使用Vuex

个人感觉：，由于Pinea是轻量级的，体积很小，它适合于中小型应用。它也适用于低复杂度的Vue.js项目，因为一些调试功能，如时间旅行和编辑仍然不被支持。
将 Vuex 用于中小型 Vue.js 项目是过度的，因为它重量级的，对性能降低有很大影响。因此，Vuex 适用于大规模、高复杂度的 Vue.js 项目。

pinia和vuex在vue2和vue3都可以使用，一般来说vue2使用vuex,vue3使用pinia。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)