【精品】pinia详解

简介

pinia是最新一代的轻量级状态管理插。
优点：

• 简便，存储和组件变得很类似，你可以轻松写出优雅的存储。
  = 类型安全，通过类型推断，可以提供自动完成的功能。
  = vue devtools 支持，可以方便进行调试。
  = Pinia 支持扩展，可以非常方便地通过本地存储，事物等进行扩展。
• 模块化设计，通过构建多个存储模块，可以让程序自动拆分它们。
• 非常轻巧，只有大约 1kb 的大小。
• 服务器端渲染支持。
• 完整的 ts 的支持；
• 去除 mutations，只有 state，getters，actions；
• actions 支持同步和异步；
• 代码扁平化没有模块嵌套，只有 store 的概念，store 之间可以自由使用，每一个store都是独立的
• 无需手动添加 store，store 一旦创建便会自动添加；
• 支持Vue3 和 Vue2

安装配置

• 安装命令：

npm install pinia -S

• main.ts配置

import {createPinia} from 'pinia'

const store= createPinia()
app.use(store)

通过state修改

• 在state/index.ts文件中编写：

import {
    defineStore} from "pinia"

export const useUserStore = defineStore('user', {
    
    state: () => {
    
        return {
    
            name:'',
            age: 0
        }
    }
})

• Demo.vue

<template>
  {
   { user .name }}------{
   { user .age }}
  <br>
  <el-button type="primary" @click="user.age++">直接修改</el-button>
  <el-button type="primary" @click="fun1">批量修改</el-button>
  <el-button type="primary" @click="fun2">批量修改：函数式写法</el-button>
  <el-button type="primary" @click="fun3">修改所有的值</el-button>
</template>

<script setup lang="ts"> import {
      useUserStore} from "@/store"; const user = useUserStore() const fun1 = ()=>{
       //$patch方法可以批量修改多个值 user.$patch({
       name:'张三', age:1234 }) } const fun2 = ()=>{
       //此处可以编写业务逻辑（推荐使用） user.$patch((state)=>{
       if (state.name ==''){
       state.age =6666 }else {
       state.age =8888 } }) } const fun3 = ()=>{
       //$state：设置为新对象来替换store的整个状态。缺限：必须修改所有的值 user.$state = {
       name:'zhangsan', age :3333 } } </script>

• 结果
  

通过actions修改

在actions中可以做同步也可以做异步操作。
actions中的方法可以相互调用。

• store/index.ts

import {
    defineStore} from "pinia"

export const useCountStore = defineStore('count', {
    
    state: () => {
    
        return {
    
            count: 0
        }
    },
    actions: {
    
        increment() {
    
            this.count++
        },
        setCount(p: number) {
    
            this.count = p
        },
        //异步操作
        decrement() {
    
            setTimeout(() => {
    
                this.count--
            }, 1000)
        },
        async sth(){
    
            const tmp = await 1234
            this.count = tmp
            this.setCount(7878)  //调用
        }
    }
})

• Demo.vue

<template>
  {
   { counter.count }}
  <br>
  <el-button type="primary" @click="fun1">借助actions修改</el-button>
  <el-button type="primary" @click="fun2">借助actions修改</el-button>
  <el-button type="primary" @click="counter.decrement">异步操作</el-button>
  <el-button type="primary" @click="counter.sth">异步操作</el-button>
</template>

<script setup lang="ts"> import {
      useCountStore} from "@/store"; const counter = useCountStore() //借助actions修改 const fun1 = ()=>{
       counter.increment() } //借助actions修改 const fun2 = ()=>{
       counter.setCount(789) } </script>

• 结果
  

getters

不管调用多少次，getters中的函数只会执行一次，且都会缓存

• store/index.ts

import {
    defineStore} from "pinia"

export const useCountStore = defineStore('count', {
    
    state: () => {
    
        return {
    
            count: 10
        }
    },
    getters: {
    
        //普通函数形式，可以使用this
        getCount(): number {
    
            return this.count
        },
        //箭头函数形式，不能使用this
        newCount: (state): number => {
    
            return state.count + 5
        },
        getDoubleCount(state): number {
    
            return state.count * 2 + this.getCount
        }
    }
})

• Demo.vue

<template>
  {
   {counter.count}} <br>
  {
   { counter.getCount }} <br>
  {
   { counter.getCount }} <br>
  {
   { counter.newCount }} <br>
  {
   { counter.getDoubleCount }} <br>
</template>

<script setup lang="ts"> import {
      useCountStore} from "@/store"; const counter = useCountStore() </script>

• 结果
  

解构对象

解构主要是针对Store中的state和getters.

示例一

• store/index.js

import {
    defineStore} from "pinia"

export const useCountStore = defineStore('count', {
    
    state: () => {
    
        return {
    
            count: 10
        }
    },
    getters: {
    
        //普通函数形式，可以使用this
        getCount(): number {
    
            console.info("getCount")
            return this.count
        }
    },
    actions: {
    
        increment() {
    
            console.info("increment")
           this.count++
        }
    },
})

• Demo.vue

<template>
  响应式：{
   {counter.count}} <br>
  属性解构后丧失响应式：{
   { count }} <br>
  getters方法解构后丧失响应式：{
   {getCount}}
  <br>
  <el-button type="primary" @click="fun">属性解构后丧失响应式</el-button>
  <el-button type="primary" @click="increment">actions方法解构后不会丧失响应式</el-button>
</template>

<script setup lang="ts"> import {
      useCountStore} from "@/store"; const counter = useCountStore() //解构 const {
      count, getCount, increment} = counter const fun = () => {
       counter.count++ //属性解构后丧失响应式 console.info(count) } </script>

• 效果
  

示例二

• store/index.js

import {
    defineStore} from "pinia"

export const useCountStore = defineStore('count', {
    
    state: () => {
    
        return {
    
            count: 10
        }
    },
    getters: {
    
        //普通函数形式，可以使用this
        getCount(): number {
    
            console.info("getCount")
            return this.count
        }
    },
    actions: {
    
        increment() {
    
            console.info("increment")
           this.count++
        }
    },
})

• Demo.vue

<template>
  响应式：{
   {counter.count}} <br>
  属性解构后丧失响应式：{
   { count }} <br>
  getters方法解构后丧失响应式：{
   {getCount}}
  <br>
  <el-button type="primary" @click="fun">属性解构后丧失响应式</el-button>
</template>

<script setup lang="ts"> import {
      useCountStore} from "@/store"; import {
      storeToRefs} from "pinia"; const counter = useCountStore() //解构 const {
      count, getCount} = storeToRefs(counter) const fun = () => {
       counter.count++ //属性解构后丧失响应式 console.info(count) } </script>

• 效果
  

pinia常用API

• store/index.ts

import {
    defineStore} from "pinia"

export const useCountStore = defineStore('count', {
    
    state: () => {
    
        return {
    
            count: 10
        }
    },
    actions: {
    
        increment() {
    
            console.info("increment")
            this.count++
        }
    },
})

• Demo.vue

<template>
  {
   {counter.count}}
  <br>
  <el-button type="primary" @click="counter.count++">自增</el-button>
  <el-button type="primary" @click="counter.increment()">actions：自增</el-button>
  <el-button type="primary" @click="counter.$reset()">重置状态数据到最终状态</el-button>
</template>

<script setup lang="ts"> import {
      useCountStore} from "@/store"; const counter = useCountStore() //state发生改变时触发 counter.$subscribe((args,state)=>{
       console.info(args,state) }) //监听actions中的方法 counter.$onAction(args=>{
       console.info(args) args.after(()=>{
       console.info("after") }) }) </script>

• 结果