Pinia 详解

一 Pinia 概述

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。和Vuex相比，Pinia有很多的优势：

• mutations不再存在

• 更友好的TypeScript支持，Vuex之前对TS的支持很不友好

• 不再有modules的嵌套结构，可以灵活使用每一个store，它们是通过扁平化的方式来相互使用的

二 Pinia安装

安装pinia

npm install pinia

配置pinia

新建store文件夹，在此文件夹下新建一个index.js

mport {defineStore} from "pinia"
export  const useUsersStore=defineStore("main",{
    
})

在main.js中use

import {createPinia} from  "pinia"
import App from './App.vue'
const pinia=createPinia()
createApp(App).use(pinia).mount('#app')

三 pinia使用详解

Store有三个核心概念： state、getters、actions，等同于组件的data、computed、methods。

store文件夹下index.js中代码如下

import {defineStore} from "pinia"
export  const useUsersStore=defineStore("main",{
    state:()=>{
        return{
            username:"helloworld",
        }
    }
})

state

<script setup>
  import {useUsersStore} from "./store/index"
  import {storeToRefs} from "pinia"
  const userStore=useUsersStore()
  // const username=userStore.username //直接获取
  // const {username}=userStore //解构
  // const {username}=storeToRefs(userStore) //使用storeToRefs方法在解构后具有响应性
</script>

<template>
  <div>
  {{userStore.username}}
  </div>
</template>

这里const username=userStore.username 和const {username}=userStore 获得的username常量不具有响应性，要想具备响应性可以使用storeToRefs方法或者直接在template中使用store实例.属性。Pinia中可以直接使用store实例去修改state中的数据。

可以通过调用 store 上的 $reset() 方法将状态重置到其初始值

store.$reset()

可以调用 $patch 方法。 它允许您使用部分“state”对象同时应用多个更改

store.$patch({
  counter: store.counter + 1,
  name: 'Abalam',
})

可以通过将其 $state 属性设置为新对象来替换 Store 的整个状态

store.$state = { counter: 666, name: 'Paimon' }

getters

getters: {
    // 自动将返回类型推断为数字
    doubleCount(state) {
      return state.counter * 2
    },
    // 返回类型必须明确设置
    doublePlusOne(): number {
      return this.counter * 2 + 1
    },
  },

访问其它getter

 doubleCountPlusOne() {
      return this.doubleCount + 1
    },

将参数传递给 getter

Getters 只是幕后的 computed 属性，因此无法向它们传递任何参数。 但是可以从 getter 返回一个函数以接受任何参数：

 doubleCountPlusOne(state) {
      return (id:number)=>state.count+id
   },

actions的使用

actions 相当于组件中的 methods。可以使用defineStore()中的actions属性定义，并且它们非常适合定义一些业务逻辑。和getters一样，在action中可以通过this访问整个store实例的所有操作。