在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,
      },
    ],
  },
})
相关推荐
吃杠碰小鸡36 分钟前
commitlint校验git提交信息
前端
天天进步20151 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
虾球xz1 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇1 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒1 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员2 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐2 小时前
前端图像处理(一)
前端
程序猿阿伟2 小时前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒2 小时前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪2 小时前
AJAX的基本使用
前端·javascript·ajax