vue3 使用 pinia 并持久化存储数据
1. 官方文档
pinia官方文档地址
pinia-plugin-persistedstate数据持久化插件
2. 安装
yarn add pinia
# 或者使用 npm
npm install pinia
3. 使用
main.js 中添加如下代码：
import { createApp } from "vue";
import App from "./App.vue";
import { createPinia } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";// 持久化插件
const app = createApp(App);
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
app.use(pinia);
app.mount("#app");
src 目录创建 stores 文件夹，新建 mainStore.js 文件：
import { defineStore } from 'pinia'
// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const useStore = defineStore('main', {
// 开启数据持久化
persist: {
storage: sessionStorage,
},
// 推荐使用 完整类型推断的箭头函数
state: () => {
return {
// 所有这些属性都将自动推断其类型
counter: 0,
name: 'Eduardo',
isAdmin: true,
}
},
getters: {
doubleCount: (state) => state.counter * 2,
},
actions: {
increment() {
this.counter++
},
randomizeCounter() {
this.counter = Math.round(100 * Math.random())
},
},
})
在其他文件中引入并使用：
<script setup>
import { useStore } from "@/stores/mainStore";
const mainStore = useStore();
</script>
注意事项：
- store 是一个用reactive 包裹的对象，这意味着不需要在getter 之后写.value，但是，就像setup 中的props 一样，我们不能对其进行解构；
- 为了从 Store 中提取属性同时保持其响应式，您需要使用storeToRefs()。 它将为任何响应式属性创建 refs。