在Vue 3项目中引入Pinia进行状态管理并持久化存储

1、简介

Pinia是一个状态管理库。

Pinia的一些特性:

  • 体积小,只有1kb左右;
  • 去掉了mutations,只保留了stategettersactions
  • 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方法的第二个参数为一个配置对象,包含stategettersactions三个属性。

  • 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文件中引入UserIndexUserForm

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中的数据持久化存储。

pinia-plugin-persist文档

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,
      },
    ],
  },
})
相关推荐
Vicky&James3 分钟前
WPF到Web的无缝过渡:英雄联盟客户端项目OpenSilver迁移实战
前端·wpf
m0_748233646 分钟前
RabbitMQ 进阶
android·前端·后端
不想有bug的小菜鸟15 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
m0_7482386316 分钟前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
u01005596017 分钟前
前端代理,解决跨域问题讲解
前端
quitv22 分钟前
react脚手架配置别名
前端·javascript·react.js
m0_5287238130 分钟前
前端如何进行性能优化
前端·性能优化
化作繁星32 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
一粒沙-1 小时前
iOS 将GIF图分享至微信
前端·ios
graywen1 小时前
从文本到图像:SSE 如何助力 AI 内容实时呈现?(Typescript篇)
前端