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可以使用新增插件的方式存储缓存解决问题