浅析Pinia的简单使用
一、Pinia 简介及其使用
1、pinia 和 vuex 具有相同的功效， 是 Vue 的存储库，它允许您跨组件/页面共享状态。其设计使用的是 Composition api，更符合vue3的设计思维。Pinia 对 Vue 2 和 Vue 3 都有效。
2、安装 Pinia：npm i pinia -S （也可以使用 yarn、pnpm 等）
3、Pinia 的引入
一般我们在做项目的时候，都会在 main.js 或者 main.ts 中引入
// vue3 中引入的使用
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia';
const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
app.mount('#app')
// vue2 中引入的使用
import { createPinia } from 'pinia'
const pinia = createPinia();
new Vue({
el: '#app',
// 其他选项...// 注意同一个 `pinia` 实例可以在多个 Vue 应用程序中使用
pinia
})
二、Pinia 模块的创建
// 想要使用必须先引入 defineStore
// defineStore 方法有两个参数，第一个参数是模块化名字，即应用程序中store的唯一id（相当于身份证一样，不能重复）
// 第二个参数是选项，对象里面有三个属性，相比于 vuex 少了一个 mutations
import { defineStore } from 'pinia'
// useStore 可以是 useUser 之类的任何东西
export const useStore = defineStore('main', {
// 推荐使用：完整类型推断的箭头函数（所有这些属性都将自动推断其类型）
state: () => {
return { // 存放的就是模块的变量
count: 10,
name: "gwf",
isAdmin: true,
}
},
getters:{ // 相当于vue里面的计算属性，可以缓存数据 },
actions:{ // 可以通过actions 方法，改变 state 里面的值。}
})
三、Pinia 数据的使用
1、以vue3 页面为例，简单介绍一下，Pinia页面的使用：我们需要先定义一个 store，因为在 setup() 中调用 useStore() 之前不会创建 store。
<template>
<p>{{store.count}}</p>
</template>
<script setup>
// 这里引入我们导出的 useStore；
import { useStore } from '../store/index.js'// 值得注意的是 useStore 是一个方法，调用之后会给我们返回一个对象
// 这个时候，你就会发现，页面上就能正常显示我们在index.js 里面的 state 里面定义的 count 数据
const store = useStore()
</script>
当然如果你vuex辅助函数用的非常熟练的话，你就会产生疑问，在上面代码 p 标签中，我不写store.count。直接写成 count 行不行呢？
可以。我们可以使用 pinia 给我们提供的 storeToRefs 来展开。你会发现他其实和 vue3 中使用的 toRefs 非常的像。
import { useStore } from '../store/index.js'
import { storeToRefs } from 'pinia'
const store = useStore()
const { count } = storeToRefs(store)
2、结构store
store 是一个用 reactive 包裹的对象，这意味着不需要在 getter 之后写 .value，但是，就像 setup 中的 props 一样，我们不能对其进行解构。
为了从 Store 中提取属性同时保持其响应式，需要使用 storeToRefs()。 它将为任何响应式属性创建 refs。 当您仅使用 store 中的状态但不调用任何操作时，这很有用。
四、pinia 中 修改 state 数据的方法
1、直接修改 store 对象的数据
<button @click="add">累计</button>
const store = useStore();
const add = () => {
store.count ++
}
通过上面的代码，我们会发现，当我点击 button 按钮累加的时候，页面中 count 数据就跟着发生了变化
2、$patch 方法传递一个对象来修改
const add = () => {
store.$patch({
count: store.count + 1,
num: store.num + 1
})
}
通过以上代码我们也能实现数据的修改，但是为什么感觉比第一个还复杂了呢？
官方给我们的解释是：patch 是做了优化的，还有就是 patch 可以同时修改多个数据。
3、$patch 方法传递一个函数来修改
上面使用 $patch 传递一个对象来修改数据，那如果传递的是一个函数，该怎么修改呢？
const add = () => {
store.$patch(state => {
state.count++;
state.num++;
})
}
特别注意：如果是传递函数的话 state 就是 我们在 pinia 模块里面定义的 存储 数据的对象，不在是页面中使用的 store 对象了
4、actions 里面修改数据
// 1、首先需要在 actions 里面定义一个方法
import { defineStore } from 'pinia';
export const useStore = defineStore('main', {
// ...
actions:{
piniaAdd(){
this.count++;
// 特别注意：在这里this指向的就是当前的实例化出来的对象，
// piniaAdd 该函数如果换成箭头函数的话，this 指向就会发生改变，不能再使用 this.count++ 了
}
}
})
// 2、如何使用
const store = useStore();
const add = () => {
store.piniaAdd();
}
5、重置状态：可以通过调用 store 上的 $reset() 方法将状态 重置 到其初始值
// 2、重置状态：可通过调用 store 上的 $reset() 方法将状态重置到其初始值：
const store = useStore()
store.$reset()
6、访问其他 store 操作
要使用另一个 store ，您可以直接在操作内部使用它：const auth = useUserStore()
import { useUserStore } from './userStore'
export const useStore = defineStore('main', {
state: () => ({ // ... }),
actions: {
async fetch(params) {
const auth = useUserStore()
auth.isAdmin && this.user = await fetchUser()
}
},
})
7、注意在router.js路由鉴权中使用时，必须写在router.beforeEach里面。
五、数据持久化
使用 pinia-plugin-persist 插件
// 安装
npm i pinia-plugin-persist --save
// 引入：在main.js中引入持久化插件
import { createPinia } from "pinia";
import piniaPluginPersist from "pinia-plugin-persist"; //pinia持久化
const pinia = createPinia();
pinia.use(piniaPluginPersist);
特别注意：固化插件是 pinia.use 并不是 app.use
// 使用
export const loginStore = defineStore('main', {
//持久化
persist: {
enabled: true, // 自定义持久化参数
// 指定存储的位置以及存储的变量都有哪些，该属性可以不写，
// 在不写的情况下，默认存储到 sessionStorage 里面,默认存储 state 里面的所有数据
strategies: [
{
key: 'token', // 自定义key
storage: localStorage, // 自定义存储方式，默认sessionStorage
// 指定要持久化的数据，默认所有 state 都会进行缓存，可以通过 paths 指定要持久化的字段，其他的则不会进行持久化
paths: ['token']
},
{
key: 'menulist',
storage: localStorage,
paths: ['menulist']
}
]
}
})
