1、简介
Pinia是一个状态管理库。
Pinia的一些特性:
- 体积小,只有1kb左右;
- 去掉了
mutations
,只保留了state
、getters
、actions
; actions
同时支持同步和异步;
与Vuex相比,Pinia提供了一个更简单的API,提供了符合组合式API风格的API,最重要的是,搭配TypeScript一起使用时有非常可靠的类型推断支持(引自Pinia官网)。
2、安装Pinia
方式一:使用npm
安装Pinia:
ruby
$ npm install pinia
方式一:使用yarn
安装Pinia:
csharp
$ yarn add pinia
笔者汪小成这里使用的是yarn
。
3、创建Pinia实例
在src/store
目录下创建index.js
,内容如下:
javascript
import { createPinia } from 'pinia'
// 创建Pinia实例
const store = createPinia()
export default store
4、挂载Pinia
修改main.js
文件,挂载Pinia:
javascript
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
文件,文件内容如下:
javascript
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
文件,文件内容如下:
xml
<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:
perl
引入store
实例化store
通过actions修改state
6.2、访问state
在 src / components
文件夹下创建UserIndex.vue
文件,文件内容如下:
xml
<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
:
xml
<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
:
csharp
$ yarn add pinia-plugin-persist
7.2、使用
1、在src/store/index.js
文件中添加如下代码:
javascript
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
文件中开启持久化:
javascript
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
// 其它代码...
+ // 开启持久化
+ persist: {
+ enabled: true
+ }
})
数据默认存储在sessionStorage
中,以Store的id作为key。
如果需要,我们还可以指定数据的存储位置以及key:
javascript
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
// 其它代码...
// 开启持久化
persist: {
enabled: true,
strategies: [
{
// 指定key
key: 'user',
// 指定数据存储位置
storage: localStorage,
},
],
},
})