首发：掘金 - 汪小成
1、简介
Pinia是一个状态管理库。
Pinia的一些特性：
- 体积小，只有1kb左右；
- 去掉了
mutations，只保留了state、getters、actions； actions同时支持同步和异步；
与Vuex相比，Pinia提供了一个更简单的API，提供了符合组合式API风格的API，最重要的是，搭配TypeScript一起使用时有非常可靠的类型推断支持（引自Pinia官网）。
2、安装Pinia
方式一：使用npm安装Pinia：
$ npm install pinia
方式一：使用yarn安装Pinia：
$ yarn add pinia
笔者汪小成这里使用的是yarn。
3、创建Pinia实例
在src/store目录下创建index.js，内容如下：
import { createPinia } from 'pinia'
// 创建Pinia实例
const store = createPinia()
export default store
4、挂载Pinia
修改main.js文件，挂载Pinia：
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import pinia from './store'
createApp(App).use(pinia).mount('#app')
5、定义Store
在 src / store / modules文件夹下创建user.js文件，文件内容如下：
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state: () => {
return {
name: '',
phone: ''
}
},
getters: {},
actions: {
setName(name) {
this.name = name ? name : ''
},
setPhone(phone) {
this.phone = phone ? phone : ''
}
}
})
我们使用defineStore方法定义Store，defineStore方法的第一个参数为Store的惟一标识，即必传且惟一。
defineStore方法的第二个参数为一个配置对象，包含state、getters、actions三个属性。
state- 用于存储状态；getters- 用于封装计算属性；actions- 用于封装业务逻辑，修改state；
6、使用Store
6.1、修改state
在 src / components文件夹下创建UserForm.vue文件，文件内容如下：
<script setup>
import { ref } from 'vue'
// 1. 引入store
import { useUserStore } from './../store/modules/user'
// 2. 实例化store
const userStore = useUserStore()
let user = {
name: '汪小成',
phone: '18660473333'
}
// 提交按钮单击事件处理
const submit = () => {
// 3. 通过actions修改state
userStore.setName(user.name)
userStore.setPhone(user.phone)
}
</script>
<template>
<div class="container">
<div class="form-item">
<span class="label">用户名：</span>
<input type="text" v-model="user.name" />
</div>
<div class="form-item">
<span class="label">手机号：</span>
<input type="text" v-model="user.phone" />
</div>
<div class="form-item">
<input type="button" @click="submit" value="提交" />
</div>
</div>
</template>
<style scoped>
</style>
我们可以通过如下步骤修改state：
引入store
实例化store
通过actions修改state
6.2、访问state
在 src / components文件夹下创建UserIndex.vue文件，文件内容如下：
<script setup>
import { ref } from 'vue'
// 1. 引入store
import { useUserStore } from './../store/modules/user'
// 2. 实例化store
const store = useUserStore()
</script>
<template>
<div class="title">用户信息展示</div>
<div class="info">用户名：{
{ store.name }}</div>
<div class="info">手机号：{
{ store.phone }}</div>
</template>
<style scoped>
.title {
margin: 30px 0;
font-size: 20px;
font-weight: bold;
}
</style>
在App.vue文件中引入UserIndex、UserForm：
<script setup>
import UserForm from './components/UserForm.vue'
import UserIndex from './components/UserIndex.vue'
</script>
<template>
<div class="app">
<UserForm class="user-form" />
<UserIndex class="user-index" />
</div>
</template>
<style scoped>
</style>
经过如上步骤，成功在Vue.js 3 项目中集成Pinia进行状态管理。🌈
7、持久化
pinia-plugin-persist是一个数据持久化插件，可以将Pinia中的数据持久化存储。
7.1、安装
使用如下命令安装pinia-plugin-persist：
$ yarn add pinia-plugin-persist
7.2、使用
1、在src/store/index.js文件中添加如下代码：
import { createPinia } from 'pinia'
+import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
+store.use(piniaPluginPersist)
export default store
2、在src / store / modules / user.js文件中开启持久化：
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
// 其它代码...
+ // 开启持久化
+ persist: {
+ enabled: true
+ }
})
数据默认存储在sessionStorage中，以Store的id作为key。
如果需要，我们还可以指定数据的存储位置以及key：
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
// 其它代码...
// 开启持久化
persist: {
enabled: true,
strategies: [
{
// 指定key
key: 'user',
// 指定数据存储位置
storage: localStorage,
},
],
},
})
