pinia入门安装与基本使用方法

pinia优点罗列

取消了getter和action等冗杂的方法;
ts原生编写,速度更快;
只有一个store,并且添加内容自动部署,提升效率;


安装与注册

安装:npm install pinia -S
在main.ts中引入pinia并注册(标准三步走,不做赘述)

import { createPinia } from "pinia";
const store = createPinia()
const app = createApp(App)
app.use(store)

简单store使用

在src文件夹下新建store文件夹,里面又新建index.ts和store-name.ts,以下为源码解释

  1. index.ts是存储store对象的仓库,store-name.ts是存储store名称的一个文件
  2. 使用defineStore新增一个store,参一为名称,参二为一对象;
  3. state返回一个函数,它的作用类似于data,存储属性
  4. getters类似于计算属性,而actions类似于methods

因为后续可能因需要使用多个store,故新增store-name.ts文件来管理这些store的名称!

// index.ts文件内容
import { defineStore } from "pinia";
import { Names } from "./store-name";

export const testStore = defineStore(Names.TEST,{
    state:()=>{
        return{
            current:1,
            name:'hello'
        }
    },
    // 类似computed,用于修饰一些值
    actions:{

    },
    // 类似methods,可同步异步调用方法
    getters:{

    }
})


// store-name文件内容
export const enum Names{
    TEST = 'TEST'
}

之后使用某个组件把store导入(导入时不用写完整路径,如下方代码所示);
再实例化这个仓库,就可以调用store中state内定义的属性了!!!(使用插值语法配合点运算符)

<template>
  <div>
    pinia中提取的值:{{ data.current }}--{{ data.name }}
  div>
template>

<script setup lang='ts'>
import { testStore } from './store';
const data = testStore()
script>

state定义值修改

在组件内部可以直接使用store实例来对state中定义的属性值进行修改;

  • $patch 直接对store内的state进行修改
  • $patch 接收一个函数,函数形参为store的state,所以我们直接使用state.xxx即可修改对应的值!!!
  • 当然还有单个变量修改的方法,就是直接data.current=xxx来修改,只不过结构不太好
<script setup lang='ts'>
import { testStore } from './store';
const data = testStore()

const changeVal = ()=>{
  data.$patch((state)=>{
    state.current=100,
    state.name='goodbye world!!!'
  })
}
</script>

或者直接对state下手,免去了$patch代理的过程;
但注意!使用此方式就必须要对state中的所有属性重新定义一次,否则会报错!

此方法为对象的书写方式,写对属性的赋值用冒号而不是等号,细心细心在细心,别一昧追求speed

const changeAgain = ()=>{
  data.$state = {
    current:1000,
    name:'none'
  }
}

TIPS:还有最后一种办法,直接在actions内定义一个修改state中属性的方法,然后于组件内部调用该方法即可


store解构

对store使用解构赋值的办法直接获得state中的所有属性;
因为默认解构获得的属性不具有响应式,故需要使用storeToRefs方法来让这些属性具有响应式;
一旦具有响应式就可以通过xxx.value修改他们的值了!!!

<script setup lang='ts'>
import { storeToRefs } from 'pinia';
import { testStore } from './store';
const data = testStore()

const { current, name } = storeToRefs(data) // 解构赋值
const changeCurrent = () => {
  current.value = 100
}
script>

getters解析

上文讲过,本对象类似于计算属性computed,故对象内部属性都是一个方法且使用return返回值;
组件调用时直接使用插值语法即可(假设组件内store实例名称为Store): {{Store.getCurrent}}

export const testStore = defineStore(Names.TEST,{
    state:()=>{
        return{
            current:1,
            name:'hello'
        }
    },

    getters:{
        getCurrent():string{
            return `the current is ${this.current}`
        }
    } 
})

actions解析

本方法类似于methods,可以支持同步和异步请求,同步不多说,下面代码展示异步的写法;
async定义异步变量或者方法来进行请求操作

type User = {
    name: string,
    age: number
}

const login = (): Promise<User> => {
    return new Promise((reslove) => {
        setTimeout(() => {
            reslove({
                name: 'helloworld',
                age: 12
            })
        }, 2000);
    })
}

export const testStore = defineStore(Names.TEST, {
    state: () => {
        return {
            user: <User>{}
        }
    },
    actions: {
        async setUser() {
            const result = await login()
            this.user = result
        }
    }
})

其他重要API

$reset
重置state内所有属性(即恢复到store中设置的最初值)

const data = testStore()    // store实例
const reset = ()=>{
  data.$reset()
}

$subscribe
返回一个函数,函数默认有两个形参;
检测store对象中任何一个属性的变动,变动转化成对象存储在形参args里,state顾名思义就是存储变化后的state

data.$subscribe((args,state)=>{
  console.log(args);
  console.log(state);
})

pinia插件

为了解决页面刷新后数据丢失的情况,pinia可以使用新增插件的方式存储缓存解决问题

你可能感兴趣的:(前端,typescript,javascript,前端)