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

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

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,
      },
    ],
  },
})