在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,
      },
    ],
  },
})
相关推荐
开心工作室_kaic14 分钟前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿34 分钟前
webWorker基本用法
前端·javascript·vue.js
cy玩具1 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer081 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
qq_390161772 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶2 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo2 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx