Vue3中 pinia

pinia是一个用于vue的状态管理库，类似于vuex,是vue的另一种状态管理工具

Pinia意为菠萝，表示与菠萝一样，由很多小块组成。在pinia中，每个store都是单独存在，一同进行状态管理。 很多人也将pinia称为vuex5，因为pinia将作为vue3推荐的状态管理库，而vuex将不再迭代。

与vuex有什么不同

与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。

1.mutations 不再存在。

2.无需创建自定义复杂包装器来支持 TypeScript，所有内容都是类型化的，并且 API 的设计方式尽可能利用 TS 类型推断。

3.不再需要注入、导入函数、调用函数、享受自动完成功能！

4.无需动态添加 Store，默认情况下它们都是动态的

5.不再有 modules 的嵌套结构

pinia基本使用

1.创建pinia实例并挂载

//在main.ts中
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 引用
import {createPinia } from 'pinia'
// 创建Pinia实例
const Pinia = createPinia()
// 挂载pinia
createApp(App).use(Pinia).mount('#app')

​

2.在src目录下新建一个stroe文件夹，在文件夹中新建一个index.ts

3.通过import将下载好的pinia引入到index.ts中并导出 并且使用defineStore创建store对象

import { defineStore } from 'pinia'
​
// 
// 第一个参数是应用程序中 store 的唯一 id
export const useStore = defineStore('main', {
 
})

pinia--state

state 是 store 的核心部分。 我们通常从定义应用程序的状态开始。 在 Pinia 中，状态被定义为返回初始状态的函数。 Pinia 在服务器端和客户端都可以工作。

1.创建state

import { defineStore } from 'pinia'

// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const useStore = defineStore('main', {
  state:()=>{//创建状态
    return {
        text:"我是pinia的一个状态变量"
    }
  }
})

2.组件中使用

<template>
  <div>
    <!-- 3.使用 -->
    我是测试pinia的组件--{{store.text}}
  </div>
</template>

<script lang="ts" setup>
// 1.引用
import 名字 from "你pinia编写的文件"
// 2.创建
let store=名字()
</script>

pinia--修改--action

修改方式1

1.组件内创建触发

调用修改方法 store.你在pinia中actions中创建的修改函数

<template>
  <div>
   
    我是测试pinia的组件--{{store.text}}
    <button @click="update()">点我修改</button>
  </div>
</template>

<script lang="ts" setup>
import {useStore} from "../store/index"
let store=useStore()

let update=()=>{
    // 调用修改方法 store.你在pinia中actions中创建的修改函数
        store.updatetext()
}
</script>

<style>

</style>

2.pinia中创建修改方法

import { defineStore } from 'pinia'



export const useStore = defineStore('main', {
  state:()=>{
    return {
        text:"我是pinia的一个状态变量"
    }
  },
  actions:{
    updatetext	(){//修改方法
        this.text="我变了"
    }
  }
})

修改方式2--$patch

$patch是pinia的内置方法 通过该方法可以直接修改state的数据

在组件内调用$patch便可直接修改数据

let update=()=>{
    store.$patch({
    		//你要修改state的数据: 你要修改的value值
        text:"我是$patch直接修改"
    })
}