Vue3+TS前进之路：大白话讲解Pinia使用教程

前言
今天复习下Pinia的使用，也是做个记录，方便自己重新来看，全文使用大白话讲Pinia。

一、引入Pinia

我们使用命令创建Vue3项目时会问你需不需要Pinia，点击Yes或者No都行，也就是复制几行代码的事。
首先是选择YES的情况

我们会多出两个文件，为了方便可以把counter.改成index看着舒服点
然后呢，我们下面将里面的东西改一下
原来是这样的

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, doubleCount, increment }
})

我们给它改成这样的，对比Vuex起来也更加熟悉点

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useStor = defineStore('mains', {  //给他导出来
  state:()=>{  // 用过Vuex的朋友应该不陌生这三个属性
    return {   // Pinia中mutations已经莫得了
      name:'张三',
    }
  },
  actions:{},
  getters:{}
})

其次是选择No的情况
安装命令来一个先：
yarn add pinia
npm install pinia
然后接下来把他就是引入到main里面去：

import { createPinia } from 'pinia'
 
app.use(createPinia())

然后在你的根目录也就是跟路由文件夹同级的那个地方创建一个store文件夹里面放一个文件index.ts，文件夹里面放入上面代码。也就是：

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useStor = defineStore('mains', {  //给他导出来
  state:()=>{  // 用过Vuex的朋友应该不陌生这三个属性
    return {   // Pinia中mutations已经莫得了
      name:'张三',
      age:18
    }
  },
  actions:{},
  getters:{}
})

目前文件已经OK了，那么开始唱跳rap吧

二、属性讲解
state
这个是存储变量的地方
在里面放入变量后这样用：

import { useStor } from '../stores/counter'
const stor = useStor()
console.log(stor.name) // 张三
					   // 要在模板显示也一样 {{ stor.name }}
				       // 用解构赋值来说的话就是
let {{ name }}  = stor // 不过这样解构是无法更改的
					   // 需要更改的话需要引入
import { storeToRefs } from 'pinia';
                       // 然后这样解构
let {{ name }} = storeToRefs(stor)
name.value = '李四' // name就变成李四了
                   // 改一个这样改，那有时候我们想批量改行不行呢？
				  // 那不是必须的必昂
                 // 批量修改需要一个方法
store.$patch(state=>{  // 得用介个方法 $patch
		state.name = '李四'
		state.age= 12
	})

actions
接下来是actions，这个也是比较简单的，就类似于计算属性了，不过他可以修改state里面的变量
他是这样用的：
例如有以下场景：我需要在组件内传递一个参数和我state中的某个变量相加并将输出到组件内或者更改age

在我们的actions里面写入
actions:{
    addAge(val:number){  // val是我们组件输入进来的参数
      this.age += val   // 将他们相加 并让age变化 
      return this.age += val // 或者直接输出到组件里面
    }
  },
  // 组件中如何使用？
  // 这个是直接输出的
  const stor = useStor()
  const result = stor.addAge(10)
  // 让age变化的话直接就是使用后的age就好了，没那么多花里胡哨的操作

getters
getters呢，跟Vuex基本类似，一样有缓存机制
如何使用

getters:{
  	ageAdd(){   // 如果是使用TS的朋友这样写会出现以下报错
  				// 由于“ageCopy'”不具有返回类型批注并且在它的一个返回表达式中得到直接或间接引用，因此它隐式具有返回类型 "any"
  				// 原因：如果getters中使用了this，则必须手动指定返回值的类型，否则类型推导不出来
  				// 解决方法就是ageAdd():any就好了
  		return this.age + 100;  
  	}
  },
  // 组件内使用
  // 你直接和其他变量一样结构出来就好了
  let {name,age,ageAdd} = storeToRefs(stor)

说完方法了，接下来谈谈持久化存储
持久化存储，说白了就是帮你存储到本地
先安装个插件

npm i pinia-plugin-persistedstate --save
// 看清楚，网上很多教程都是用的 ‘pinia-plugin-persist’这个插件
// 这个插件可以用，但是很坑，具体坑法大家自行百度一下吧，大概是有关于类型的问题，TS会出现红线

完了呢
在你的main.ts里面给他挂一下

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
// 把这玩意放进去

接下来就是配置你的持久化

export const useStor = defineStore('user',{
    persist:{
      key: 'my-custom-key',  //你的key叫啥
      storage: localStorage,  // 你要存哪儿，默认是sessionStorage，但一般都是改为localStorage
      paths: ['info.sex', 'saveMeToo'] // 可以设置为你哪些要持久化存储 
      // []是啥都不存，undefinde或者null就是全部都存
    },
  state:()=>{
    return {
      name:'张三',
      info:{
      	sex:'男'
      },
      age:18
    }
  },
})

当然，如果你不想配置这些东西，想更加便捷地持久化所有，也行！

persist: {
  enabled: true
}
// 这样就行了

接下来就是Pinia分模块了
Pinia不像Vuex一样用modules分模块，在store目录中直接定义对应模块就可以了，不需要那么多花里胡哨。
例如我在里面写了个user模块的，那路径就是stores/user.ts 就行了
里面的话就是

import { defineStore } from 'pinia'

export const useStor = defineStore('user',{
    persist:{
      key: '',
      storage: localStorage,
    },
  state:()=>{
    return {
      name:'张三',
      age:18
    }
  },
  actions:{
    addAge(val:number){
      return this.age += val
    }
  },
  getters:{
    ageCopy():any{
      return this.age + 100
    }
  },
})

组件里面使用就是

import { user } from '../store/user'
const store = user();
// 使用的话跟上面一样一样的，只不过引入的路径变为专属user的Pinia文件了

接下来上一个效果图

完结，撒花✿✿✿✿✿
码字不易，帅哥美女请用金手指点点赞，蟹蟹。