vue3【抛弃vuex，使用pinia】

阅读量：

PiniaPinia 中文文档

一个新的基于Vue的状态管理解决方案
- 即将推出的最新版本（即vuetify 5.0）
- 适用于Vue 2和Vue 3系列框架
- 在默认选择vuetify现有接口时无法与vuetify协同工作的情况适用于Vue 2框架
- 相比vuetify提供更为完善的TypeScript生态
- 支持服务器端渲染

Pinia核心概念

Pinia 从使用角度和之前的 Vuex 几乎是一样的。反而比vuex更简单了

复习一下vuex的四个核心概念：

state 存储当前的状态
Getters 类似通过某种方式计算获取属性的过程
Mutations 执行修改操作以更新当前的状态
Actions 异步地执行特定的动作

Store（例如 Pinia）是一个存储实例，在其中您将保存状态和业务逻辑模块。这个存储实例不会绑定到您的组件树结构中；此外，请注意它承接全局状态的变化。具体来说，Pinia包含三个核心概念：状态管理、数据持久化以及事件监听功能。

State 类似于组件中的 data 属性，在某些情况下也被称为全局状态存储器；
Getters 则相当于用于获取特定属性的方式；
而 Actions 则能够处理同步和异步的操作。
值得注意的是，在 Vue 中，默认使用 mutations 来处理同步操作和 actions 来处理异步操作；
然而这种做法确实显得有些繁琐。

Pinia的使用

1、安装

复制代码

    npm install pinia

2、在main.js引入

复制代码

 import { createPinia } from 'pinia' //引入pinia

    
  
    
 app.use(createPinia())

3、新建一个store文件夹，在该文件夹下新建一个index.js

我们先定义一个如下的基础配置文件

复制代码

 import { defineStore } from "pinia";

    
 // 1、定义容器
    
 // defineStore的参数1：容器的ID，必须唯一，将来Pinia会把所有的容器挂载到根容器
    
 // defineStore的参数2：选项对象
    
 // 返回值：是一个函数，使用时通过调用得到容器实例
    
 export const mainStore = defineStore('main', {
    
       // 类似于组件的data,用来存储全局状态的
    
       // 1、必须是函数：这样是为了在服务端渲染的是会避免交叉请求导致的数据状态污染
    
       // 2、闭学式箭头函数，是为了更好的 TS 类型推导
    
       state: () => {
    
         return {
    
               count: 100
    
         }
    
       },
    
       // 类似组件的computed,用来封装计算属性，有缓存的功能
    
       getters: {
    
  
    
       },
    
       // 类似于组件的methods,封装业务逻辑，修改state
    
       actions: {
    
  
    
       }
    
 })
    
 // 2、使用容器中的state
    
 // 3、修改state
    
 // 4、容器中的aciton的使用

4、在组件中使用上面定义的count值

结果显示正常：

注意：当我们想要从一个store中获取多个数据项时尽管这种做法能够保持响应式的特性但如果采用这种方法就会显得繁琐冗杂

因此，我们可以通过 解构赋值 来简化代码

然而，在上述方法中存在一个主要缺陷：即采用该方法所得的数据并非实时反馈型数据而是静态的一次性数据。

来验证一下：点击按钮，数值是不会变化的

解决方法：主要通过pinia官方提供的API库storeToRefs ，对原始数据进行转换处理以生成响应式格式的数据

复制代码

 import { storeToRefs } from 'pinia'

    
 import { mainStore } from '../store/index'
    
 const storedata = mainStore()
    
 // pinia其实就是把state数据都做了reactive处理了
    
 // 因此需要把结构出来的数据做ref响应式代理
    
 const { count, num } = storeToRefs(storedata)
    
 function addCount() {
    
     storedata.count++
    
 }