如果你想学到更多实用前端知识。
可以关注我的公众号：【前端驿站Lite】，一个不止分享前端的地方 ᕦ( •̀∀•́)ᕤ
阅读收获
阅读完本篇文章，你将会有以下收获：
pinia是什么？有哪些优势？基本使用步骤。- 充分了解
pinia核心概念state、getter、action。pinia如何实现数据持久化。- 了解pinia的其他实例api，如：
$patch、$reset、$subscribe、$onAction等。
pinia是什么
官方解释：
Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。
pinia是vuex的升级版，因为有vue3新特性的加持，比vuex更简单、更灵活。
那pinia还有哪些优势呢？
pinia的优势
vue2/3都可以用。pinia中只有state、getter、action，抛弃了Vuex中的Mutation，用法更简单了。pinia中action支持同步和异步pinia不用在使用模块（module）对store进行分割。pinia支持插件来扩展自身功能。- 支持服务端渲染 (SSR)
那如何使用pinia呢？
安装
首先需要在项目中安装pinia。
yarn add pinia
引入到项目
安装完成后，就可以将pinia引入到项目中了，只需要调用createPinia()方法将pinia实例化，然后挂载到vue实例上就可以了。
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const app = createApp(App)
const pinia = createPinia()
app.use(pinia)
app.mount('#app')
创建store
下一步就应该去创建我们的数据仓库store了，store中存储的是我们需要共享的数据。
创建store需要调用pinia中的defineStore方法,该方法接受两个参数，第一个参数是store的唯一 id，第二个参数是store的配置属性。
defineStore方法配置store属性时，有两种写法，一种是Option 对象形式，一种是Setup 函数形式。
对象形式（Option Store）
与 Vue 的选项式 API 类似，我们需要传入一个带有 state、actions 与 getters 属性的 Option 对象。
与vue组件相比，你可以认为 state 是 store 的数据 (data)，getters 是 store 的计算属性 (computed)，而 actions 则是方法 (methods)。
这种方式非常直观，推荐使用。
// src/store/user.js
import { defineStore } from "pinia"
export const useUserStore = defineStore("user", {
state: () => ({
name: "石头",
age: 18,
}),
getters: {
getPerson: (state) => {
return `${state.name}今年${state.age}岁了`
}
},
actions: {
changeName(name) {
const that = this;
setTimeout(() => {
that.name = name;
}, 1000)
},
},
})
函数形式（Setup store）
与 Vue 组合式 API 的 setup 函数 相似，我们可以传入一个函数，该函数定义了一些响应式属性和方法，并且返回一个带有我们想暴露出去的属性和方法的对象。
在 Setup Store 中：
ref()就是state属性computed()就是gettersfunction()就是actions
Setup store 比 Option Store 带来了更多的灵活性，因为你可以在一个 store 内创建侦听器，并自由地使用任何组合式函数。不过，请记住，使用组合式函数会让 SSR 变得更加复杂。
import { defineStore } from "pinia"
import {computed, ref} from "vue";
export const useThemeStore = defineStore("theme", ()=>{
const defaultSize = ref(16)
const getBigSize = computed(() => {
return defaultSize.value + 10
})
const changeSize = (size) => {
defaultSize.value = size
}
return {
defaultSize,
getBigSize,
changeSize
}
})
使用
那我们创建仓库后怎么去使用呢？
引入上面创建的useUserStore，调用useUserStore方法得到仓库userStore实例。 可以直接使用userStore访问仓库中的属性。
上面两种方式创建的store仓库，在这里使用方法都是一样的。
1. 对象形式（Option Store）
import { useUserStore } from "@/store/user"
const userStore = useUserStore()
console.log('user',userStore)
<template>
<span>{{userStore.name}}</span>
<span>{{userStore.age}}</span>
</template>
2. 函数形式（Setup store）
import { useThemeStore } from "@/store/theme"
const themeStore = useThemeStore()
console.log('theme',themeStore)
现在我们已经学会如何使用pinia了，但pinia中还有几个概念state、getter、action需要我们继续深入了解。
让我们继续吧。
state
我们都知道store是用来存放公共数据的，那么数据具体存放在哪里呢？就是存放在state中。
export const useUsersStore = defineStore("users", {
state: () => {
return {
name: "小白菜",
age: 25,
sex: "男",
};
},
});
我们还需要知道state中的数据是如何读取和修改的，又有哪些需要注意的地方。
读取 state
<script setup>
import { useUsersStore } from '@/stores/user'
const userStore = useUsersStore()
</script>
<template>
<div>
{{userStore.name}}
</div>
</template>
修改 state
方式一：直接修改
userStore.name = '萝卜干'
方式二：$patch({}) 对象形式 批量修改
$patch 是 pinia 提供的一个api，用来批量修改 state 中的数据，接收一个对象参数，对象中的属性就是 state 中的属性，值就是要修改的值。
可修改单个或多个属性，pinia内部做了优化，相同属性会被自动覆盖。
userStore.$patch({
name: '土豆粉',
age:19
})
方式三：$patch(()=>{}) 回调形式
这是$patch的另一种写法，回调默认接收一个参数，也就是store中的state，在回调函数中修改state中的数据。 推荐使用
userStore.$patch((state) => {
state.name = '小白菜'
state.age = 90
})
方式四：在actions中修改
下面会讲到
getters
有时候我们需要拿到state计算或处理后的数据，但又不能影响到原来的state，这时候就需要用到getters了。
getter 也就是 store 中的计算属性了，返回一个新的结果，与Vue中的计算属性computed一样，会被缓存。
提醒：
getters是一个对象- 默认接收一个
state参数，就是我们仓库中的state，该参数是可选的。- 普通函数，可以使用
this访问整个Store的实例
基本使用
export const useUserStore = defineStore('user', {
state: () => ({
name: '小白菜',
age: 18,
}),
getters: {
getUser() {
return `${this.name}，今年${this.age}岁`
},
getUser2: (state) => {
return `${state.name}，今年${state.age}岁`
}
},
})
调用
与state使用方式一样，直接使用（如：userStore.getUser）就可以了。
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()
console.log('getUser', userStore.getUser)
console.log('getUser2', userStore.getUser2)
使用其他getter
我们也可以在某个getter中使用其他的getter，这样就可以实现getter的复用了。
只需要将箭头函数转换为普通函数，函数内部通过 this 来调用当前 Store 上的数据和方法。
export const useStore = defineStore('main', {
state: () => ({
message: 'Hello World',
}),
getters: {
fullMessage: (state) => `The message is "${state.message}".`,
// 这个 getter 返回了另外一个 getter 的结果
emojiMessage() {
return `🎉🎉🎉 ${this.fullMessage}`
},
},
})
给getter传参
我们还可以给getter传递参数，但getter 本身是不支持参数，需要返回一个带有入参的函数，实现给getter传参的效果。
注意：这样 Getter 将不再被缓存，只是个被调用的函数
import { defineStore } from 'pinia'
export const useStore = defineStore('main', {
state: () => ({
message: 'Hello World',
}),
getters: {
// 定义一个接收入参的函数作为返回值
signedMessage: (state) => {
return (newName) => `${newName} say: "The message is ${state.message}".`
},
},
})
调用
const store = useStore()
const signedMessage = store.signedMessage('Petter')
console.log('signedMessage', signedMessage)
// Petter say: "The message is Hello World".
actions
前面我们说到的getters主要是数据层面，并没有涉及具体的业务逻辑，那如果我们写业务代码的话，就需要用到actions了。
actions属性就和我们组件代码中的methods相似，用来放置一些处理业务逻辑的方法。
actions属性值同样是一个对象，该对象里面也是存储的各种各样的方法，包括同步方法和异步方法。
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state: () => {
return {
name: 'hello',
}
},
getters: {},
actions: {
// 同步更新 name 值
updateNameSync(newName) {
this.name = newName
return '同步修改state中的name值完成'
},
// 异步更新 name 值
async updateName(newName) {
return new Promise((resolve) => {
setTimeout(() => {
// 这里的 this 是当前的 Store 实例
this.name = newName
resolve('异步修改完成')
}, 3000)
})
},
},
})
调用
在 Pinia 像普通的函数一样使用即可，不需要和 Vuex 一样执行 commit 或者 dispatch，
import { useUserStore } from '@/store/user'
const store = useUserStore()
// 立即执行
store.updateMessageSync('同步')
// 3s 后执行
store.updateMessage('异步')
重置
那我们想重置state中的数据怎么办呢？
$reset()是pinia提供的一个api，用来重置state中的数据，将state中的数据重置为初始值。
// 通过调用 store 的 $reset() 方法将 state 重置为初始值。
userStore.$reset()
解构
store使用过程中，还有另外一个用法就是解构，我们可以把store中的state进行解构使用。
但是解构会失去响应式，需要 StoreToRefs 避免丢失响应式。
<script setup>
import { useUsersStore } from '@/stores/user'
const userStore = useUsersStore()
const {name} = userStore
</script>
<template>
<div class="greetings">
{{userStore.name}}
{{name}}
</div>
</template>
State 也可以使用解构，但是解构会失去响应式，需要 StoreToRefs 避免丢失响应式
import { storeToRefs } from 'pinia'
const userStore = useUsersStore()
const { name } = storeToRefs(userStore)
其他实例api
上面已经介绍了$patch、$reset两个实例api，还有几个实例api不常用，我想我们应该了解一下。
$subscribe
当state中的值任意一个发生变化的时候，就会触发该函数
/**
* 当state中的值任意一个发生变化的时候，就会触发该函数
*
* args: 里面会记录新旧值
* state：就是当前操作的state的实例
* options: 是一个对象，比如detached，这是一个boolean参数，当这个参数为true时，表明即使当前组件销毁后，也继续监控state里面值的变化，可选
*/
goodsStore.$subscribe((args, state) => {
console.log('args', args)
console.log('state', state)
},{
detached: true
})
$onAction
当调用actions里面的函数的时候，就会触发该函数
/**
* 当调用actions里面的函数的时候，就会触发改函数
*
* args：接收参数，里面封装了多个api：
* args.after：当$onAction里面的逻辑执行完成之后才会执行args.after函数逻辑，所以args.after放置的位置于执行顺序无关
* args.onError：当调用actions里面的函数发生错误时，args.onError函数也会执行
* args.args：接收调用actions里面的函数传递的参数，是一个数组
* args.name：执行的actions里面的函数的名称
* detached: 这是一个boolean参数，当这个参数为true时，表明即使当前组件销毁时，也继续监控actions里面的函数调用，可选
*/
goodsStore.$onAction((args) => {
args.after(() => console.log("args.after", "===="));
console.log("args", args);
}, true);
数据持久化
store中的数据，刷新页面后就丢失了，如果想保留这些数据，就要用到数据持久化了。
推荐使用pinia-plugin-persistedstate
安装插件
yarn add pinia-plugin-persistedstate
将插件添加到pinia
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
开启数据持久化
在仓库中指定persist为true，就可以开启数据持久化了。
开启后默认有以下配置：
- 使用
localStorage进行存储 store.$id作为storage默认的key- 使用
JSON.stringify/JSON.parse进行序列化/反序列化 - 整个
state默认将被持久化
下面是Option Store写法，Setup Store 大同小异，去看官方文档吧。
import { defineStore } from 'pinia'
export const useStore = defineStore('main', {
state: () => {
return {
someState: '你好 pinia',
}
},
persist: true,
})
其他操作
除上面默认配置外，我们还可以进行一些其他的配置：
- 指定存储的
key - 指定要持久化的数据
- 指定持久化的存储方式，默认 localStorage
import { defineStore } from 'pinia'
export const useStore = defineStore('store', {
state: () => ({
user: {
name: '小白菜',
age: 18,
},
company: '腾讯',
department: '前端',
}),
persist: {
// 指定持久化的key
key: 'my-custom-key',
// 指定要持久化的数据
paths: ['user.name', 'company'],
// 指定持久化的存储方式，默认 localStorage
storage: sessionStorage,
},
})
完结撒花🎉🎉🎉，你又进步了一点点。
ᕦ( •̀∀•́)ᕤ
如果觉得本文章对你有帮助，可以点点赞支持一下嘛。先谢谢啦 ᕦ( •̀∀•́)ᕤ
扫一扫
1918
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
