vue3.2的vuex升级pinia

 Pinia是什么？

Pinia 是 2019 年由 vue.js 官方成员重新设计的新一代状态管理器 , 更替 Vuex4 成为 Vuex5; 是最新一代的

轻量级状态管理插件。按照尤雨溪的说法， vuex 将不再接受新的功能，建议将 Pinia 用于新的项目。

Pinia 的优点

简便，存储和组件变得很类似，你可以轻松写出优雅的存储。

类型安全，通过类型推断，可以提供自动完成的功能。

vue devtools 支持，可以方便进行调试。

Pinia 支持扩展，可以非常方便地通过本地存储，事物等进行扩展。

模块化设计，通过构建多个存储模块，可以让程序自动拆分它们。

非常轻巧，只有大约 1kb 的大小。

服务器端渲染支持。

如何使用

使用 Pinia 非常简单，你可以通过 defineStore 来简单创建一个存储管理。

​​​​​​​yarn add pinia -s

yarn config set ignore-engines true

导入 pinia

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import {createPinia} from 'pinia'  
const pinia = createPinia();//实例化pinia
createApp(App).use(router).use(pinia).mount('#app')

状态定义

可以通过 defineStore 来简单创建一个存储管理 ;

第一个参数 ：相当于为容器起一个名字。注意：这里的 名字必须唯一，不能重复 。

第二个参数 ：可以简单理解为一个配置对象，对容器仓库的配置说明

import { defineStore } from 'pinia'
export const mainStore = defineStore('main',{
   state(){
       return {
           title:'itlove',
           count:1,
       }
   },
   getters:{
       changeCount(){
           return this.count+10
       }
   },
   actions:{
       addCount(){
   }
   }
})

引用状态数据

<template>
   <div>
       <p>{{store.title}}</p>
   </div>
</template>
<script setup>
import {ref,reactive} from 'vue'
import {mainStore} from '@/store/index' //导入状态仓库
const store = mainStore(); //实例化仓库
</script>

或者

<template>
   <div>
       <p>{{title}}</p>
   </div>
</template>
<script setup>
import {ref,reactive} from 'vue'
import {mainStore} from '@/store/index' //导入状态仓库
const {title} = mainStore(); //实例化仓库
</script>

修改状态数据

<template>
   <div>
       <p>{{store.title}}</p>
       <p>数据：{{store.count}}</p>
       <button @click="handleClick">修改状态数据</button>
   </div>
</template>
<script setup>
import {ref,reactive} from 'vue'
import {mainStore} from '@/store/index' //导入状态仓库
import { storeToRefs } from "pinia";
const store = mainStore(); //实例化仓库
// 解构并使数据具有响应式
 const {count} = storeToRefs(store);
function handleClick() {
   count.value++;
}
</script>

state 状态值修改的多种方式

使用 $patch 改变数据 ,$patch 可以同时修改多个值

方式一：通过 count.value+1;

方式二：仓库实例的 $patch 方法

  store.$patch({

    count: count.value+1,

  });

  $patch 也可以传入一个函数，函数参数为 state 状态

  store.$patch((state) => {

    state.title = "hello 艾梯哎教育 !";

    state.count++;

  });

方式三：通过 action()

store.addCount()

pinia 中 actions 的使用

在 pinia 中没有 mutations, 只有 actions, 不管是同步还是异步的代码 , 都可以在 actions 中完成

actions:{
   //actions 异步请求
   async login(user, password) {
       const userData = await apiLogin(user, password);
      
       this.$patch({
           name: user,
           ...userData,
       })
 }
}

pinia 数据持久化

通过 Pinia 插件快速实现持久化存储

插件安装：

命令： npm i pinia-plugin-persist -S

 

使用插件

import {createPinia} from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
const pinia = createPinia();  
pinia.use(piniaPluginPersist); 
createApp(App).use(router).use(pinia).mount('#app')

模块开启持久化

persist: {
       enabled: true, //开启
       strategies:[
           {
               key: 'store',
               storage: sessionStorage, 
               paths:['count']
           }
       ]
   }

以下为实战

 

 应用

 

后续高级 提升

pinia 数据持久化

通过 Pinia 插件快速实现持久化存储

插件安装：

命令： npm i pinia-plugin-persist -S

使用插件

import {createPinia} from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
const pinia = createPinia();  
pinia.use(piniaPluginPersist); 
createApp(App).use(router).use(pinia).mount('#app')

模块开启持久化

persist: {
       enabled: true, //开启
       strategies:[
           {
               key: 'store',
               storage: sessionStorage, 
               paths:['count']
           }
       ]
   }