什么是Pinia?
Pinia是一个轻量级的状态管理库,用来管理全局状态的工具。
Pinia | The intuitive store for Vue.js (vuejs.org)
它能够解决如下问题:
- 全局状态管理:所有组件都可以访问和修改状态,不用在每个组件的内部进行管理
- 简化组件之间的通信:避免使用大量的prop和provide
- 状态持久化:可以将数据储存在本地存储中,在应用重启后仍然会保留状态,本质是将数据存储在LocalStorage中。
常见的应用在保持用户的登录状态。
Pinia和LocalStorage有一些区别:
- LocalStorage只允许存储字符串类型,大小限制为5MB(适合简单场景)
- Pinia可以存储任何的数据类型,没有数据大小的限制(适合复杂场景)
安装Pinia
在终端输入:
之后在package.json
文件中就可以找到pinia的版本信息:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| { "name": "demo", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "pinia": "^2.1.7", "vue": "^3.4.21" }, "devDependencies": { "@vitejs/plugin-vue": "^5.0.4", "vite": "^5.2.0" } }
|
安装之后就可以在main.js
中创建一个pinia实例:
1 2 3 4 5 6 7 8 9 10 11
| import { createApp } from 'vue' import App from './App.vue'
import { createPinia } from 'pinia'
const pinia = createPinia()
const app = createApp(App)
app.use(pinia) app.mount('#app')
|
之后我们在src
目录下创建一个stores
的文件夹,创建一个web.js
文件,在文件中创建一个store对象.
defineStore有两个参数:id(最好和js文件名相同)和setup函数(或者是Option对象)
下面是一个例子:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| import { defineStore } from "pinia"; import { reactive,ref } from "vue";
defineStore("web",()=>{ const web = reactive({ title:"百度", url:"https://www.baidu.com" })
const users = ref(1000)
const userAdd = ()=>{ users.value++ }
return { web, users, userAdd } })
|
定义后使用export
导出,变量的命名是由use
+Id
+Store
组成:
1
| export const useWebStore = defineStore("web",……)
|
导出后就可以在组件中使用:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| <script setup> import { useWebStore } from './stores/web';
const useWeb = useWebStore();
console.log(useWeb.web.title) console.log(useWeb.users)
</script>
<template> {{ useWeb.web.title }} {{ useWeb.users }}
<button @click="useWeb.userAdd">添加用户</button>
</template>
<style scoped>
</style>
|
可以看出pinia就是将状态组件进行了集中的管理。
持久化存储
为了关闭浏览器的时候用户的状态不发生丢失,需要使用localStorage将数据保存下来。
这里需要使用到一个本地持久化存储插件:pinia-plugin-persistedstate
Home | pinia-plugin-persistedstate (prazdevs.github.io)
首先要安装插件:
1
| npm i pinia-plugin-persistedstate
|
安装后在package.json
中可以可看到对应的版本信息:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| { "name": "demo", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "pinia": "^2.1.7", "pinia-plugin-persistedstate": "^3.2.1", "vue": "^3.4.21" }, "devDependencies": { "@vitejs/plugin-vue": "^5.0.4", "vite": "^5.2.0" } }
|
之后在main.js
中创建一个实例,并作用于pinia:
1 2 3 4 5 6 7 8 9 10 11 12 13
| import { createApp } from 'vue' import App from './App.vue'
import { createPinia } from 'pinia' import { createPersistedState } from 'pinia-plugin-persistedstate'
const pinia = createPinia() pinia.use(createPersistedState())
const app = createApp(App)
app.use(pinia) app.mount('#app')
|
在web.js
的defineStore
的末尾添加一个参数:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
| import { defineStore } from "pinia"; import { reactive,ref } from "vue";
export const useWebStore = defineStore("web",()=>{ const web = reactive({ title:"百度", url:"https://www.baidu.com" })
const users = ref(1000)
const userAdd = ()=>{ users.value++ }
return { web, users, userAdd } }, { persist:true })
|
这样就开启了持久化存储,在浏览器调试工具的应用程序中的本地存储即可看到数据的内容,且刷新后内容不丢失。