Vue3.0（七）：Pinia状态管理

Pinia状态管理

最初是作为一个实验为 Vue重新设计状态管理，让它用起来像组合式API

Pinia和Vuex的对比

• 为什么要用 Pinia
  • Pinia最初是为了 探索Vuex的下一次迭代会是什么样子，结合了 Vuex5核心团队讨论中的很多想法
  • 最终，团队意识到 Pinia已经实现了Vuex5中大部分的内容，所以最终决定 使用Pinia来代替Vuex
  • 与Vuex相比，Pinia提供了一个更加简单的API，具有更少的仪式，提供了 Composition-API风格的API
  • 最重要的是，能够更好的支持TypeScript
• 与Vuex相比，Pinia的优势
  • 比如mutations不再存在
  • 更友好的支持TypeScript
  • 不再有modules
  • 不再有命名空间的概念，不需要记住复杂的关系

如何使用Pinia

• 首先通过 npm install pinia安装pinia
• 安装完成后，在src文件夹下面创建store文件夹
• 创建index.js的入口文件

import { createPinia } from "pinia";

export default createPinia();

• 在main.js使用pinia插件

import { createApp } from "vue";
import App from "./App.vue";
import pinia from "./store";

const app = createApp(App);
app.use(pinia);

app.mount("#app");

• 在store文件夹下面创建不同的store
  • 创建一个counter.js的store文件，用于保存计数的状态

import { defineStore } from "pinia";

//defineStore创建store，可以创建多个store
//第一个参数是用于命名store的
//第二个参数是store的具体内容
const useCounter = defineStore("counter", {
  state: () => ({
    count: 199,
  }),
});

//返回值是一个函数，将函数暴露出去
export default useCounter;

• 而后在具体的组件中引入暴露的函数，完成调用即可

<template>
  
  {{ counterStore.count }}
template>

<script setup>
//引入暴露的store函数
import useCounter from "./store/counter.js";
const counterStore = useCounter();
script>

<style scoped>style>

认识Store

• 什么是Store
  • 一个store（如pinia）是一个实体（通过defineStore()创建），它会持有组件树种的 状态和业务逻辑（业务逻辑主要是网络请求等内容），也就是保存了全局的状态
  • 有点像始终存在，并且 每个人都可以读取和写入的组件
  • 可以在项目种，定义 任意数量的Store来管理状态
• Stroe有三个核心概念
  • state、getters、actions
  • 等同于组件的 data、computed、methods
  • 一旦 store被实例化，可以直接在store上访问 state、getters、actions种定义的任何属性

定义一个store

在上面的例子中有讲过store的定义

• 使用 defineStore进行定义
  • 第一个参数：是store的唯一名称，也成为id，是必要的
  • 第二个参数是具体的store对象
• 返回的函数同一使用useX进行命名

import { defineStore } from "pinia";

//defineStore创建store，可以创建多个store
//第一个参数是用于命名store的
//第二个参数是store的具体内容
const useCounter = defineStore("counter", {
  state: () => ({
    count: 199,
  }),
});

//返回值是一个函数，将函数暴露出去
export default useCounter;

认识和定义State

• state是store的核心部分

import { defineStore } from "pinia";

//defineStore创建store，可以创建多个store
//第一个参数是用于命名store的
//第二个参数是store的具体内容
const useCounter = defineStore("counter", {
  state: () => ({
    count: 199,
  }),
});

//返回值是一个函数，将函数暴露出去
export default useCounter;

操作State

• 读取和写入state：
  • 默认情况下，可以通过store实例访问状态来直接读取和写入状态

//引入暴露的store函数
import useCounter from "./store/counter.js";
const counterStore = useCounter();

//读取
counterStore.count
//修改
counterStore.count++

• 重置State
  • 可以通过调用store上的**$reset()**方法讲状态重置到初始值

//引入暴露的store函数
import useCounter from "./store/counter.js";
const counterStore = useCounter();

counterStore.$reset()//会将counter恢复到初始定义的状态

• 一次性修改多个State
  • 通过 $patch

//引入暴露的store函数
import useCounter from "./store/counter.js";
const counterStore = useCounter();

counterStore.$patch({
    name:"zhangcheng",
    age:"18"
})

• 替换state
  • 通过 $state方法进行替换

//引入暴露的store函数
import useCounter from "./store/counter.js";
const counterStore = useCounter();

counterStore.$state = {
    name:"zhangcheng",
    age:"18"
}

认识和定义Getters

• 基本使用，获取本store实例下的state

import { defineStore } from "pinia";


const useCounter = defineStore("counter", {
  state: () => ({
    count: 199,
  }),
  getters:{
      doubleCount(state){
          //通过传参的方式进行访问
          return state.count
      },
      doubleCountAddOne(){
          //可以通过this进行访问
          return this.count*2+1
      }
  }
});

//返回值是一个函数，将函数暴露出去
export default useCounter;

//使用方法同state，先引入暴露的函数，执行，通过.的方式进行访问

• 使用getters中的数据
  • 可以通过 this直接访问

import { defineStore } from "pinia";


const useCounter = defineStore("counter", {
  state: () => ({
    count: 199,
  }),
  getters:{
      doubleCount(state){
          //通过传参的方式进行访问
          return state.count
      },
      doubleCountAddOne(){
          //可以通过this访问getters中的变量
          return this.doubleCount+1
      }
  }
});

//返回值是一个函数，将函数暴露出去
export default useCounter;

• 用到别的store中的数据

import { defineStore } from "pinia";
//引入其他的store
import userInfo from "./store/user.js";

const useCounter = defineStore("counter", {
  state: () => ({
    count: 199,
  }),
  getters:{
      getMessage(){
          //实例化而后使用
          const userStore = userInfo()
    		
          return userInfo.name + count
      }
  }
});

//返回值是一个函数，将函数暴露出去
export default useCounter;

认识和定义Actions

• Actions相当于组件中的methods
• 与getters一样，可以通过this访问store中的变量，但是没有传入state参数

import { defineStore } from "pinia";
//引入其他的store
import userInfo from "./store/user.js";

const useCounter = defineStore("counter", {
  state: () => ({
    count: 199,
  }),
	actions:{
        countAdd(num){
            //可以传入参数
            //直接通过this进行访问state中的状态
            this.count += num
        }
    }
});


//具体使用
//引入暴露的store函数
import useCounter from "./store/counter.js";
const counterStore = useCounter();

//直接调用方法即可
counterStore.countAdd(10)

执行异步操作

import { defineStore } from "pinia";
//引入其他的store
import userInfo from "./store/user.js";

const useCounter = defineStore("counter", {
	actions:{
      async getData(){
          const res = await fetch(xxxx)
          const data = await res.json()
          //改变state状态
          this.list = data
          //返回data
          retrun data
      }
    }
});