Pinia使用方法，数据持久化

1、选项api形式 

import { defineStore } from 'pinia'

const useCountStore = defineStore('count', {
  state: () => {
    return {
      count: 0,
    }
  },
  // 同method支持异步
  actions: {
    add(num: number) {
      this.count += num;
    },
    sub(num: number) {
      this.count -= num;
    },
    addSync(time: number) {
      setTimeout(() => {
        this.count++;
      }, time);
    },
    subSync(time: number) {
      setTimeout(() => {
        this.count--;
      }, time);
    }
  },
  // 同computed
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  persist: {
    key: "test1-key",//保存的可以
    paths: ["count"],//保存哪个变量
  },
});

export default useCountStore;

2、组合api形式 

import { computed, ref } from "vue";

export const useCountStore = defineStore('count', () => {
  const count = ref(0);

  const add = (num: number) => {
    count.value += num;
  }

  const sub = (num: number) => {
    count.value -= num;
  }

  const addSync = (time: number) => {
    setTimeout(() => {
      count.value++;
    }, time);
  }

  const subSync = (time: number) => {
    setTimeout(() => {
      count.value--;
    }, time);
  }

  const doubleCount = computed(() => count.value * 2);

  return {
    count, add, addSync, sub, subSync, doubleCount
  }
},
{
  persist: true,
});

在vue文件中调用 

<template>
  <div class="flex">
    <h3>方法一</h3>
    <div>( {{ CountStore.count }} ) ~ ( {{ CountStore.doubleCount }} )</div>
    <button @click="CountStore.add(5)">add</button>
    <button @click="CountStore.sub(5)">sub</button>
    <button @click="CountStore.addSync(500)">addSync</button>
    <button @click="CountStore.subSync(500)">subSync</button>
    <h3>方法二</h3>
    <div>( {{ count }} ) ~ ( {{ doubleCount }} )</div>
    <button @click="add(5)">add</button>
    <button @click="sub(5)">sub</button>
    <button @click="addSync(500)">addSync</button>
    <button @click="subSync(500)">subSync</button>
    <el-button>中文</el-button>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from "pinia";
import useCountStore from "../store/count";

const CountStore = useCountStore();

// 接收出pinia中数据并保持响应式
const { count, doubleCount } = storeToRefs(CountStore);

// 解构方法不需要处理响应式，可直接解构
const { add, addSync, sub, subSync } = CountStore;


</script>

 pinia数据持久化

1、使用插件如 pinia-plugin-persistedstate

import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

createApp(App).use(createPinia().use(piniaPluginPersistedstate));

 

2、 建立事件监听，在pinia添加导入导出的方法，在当页面刷新前将pinia中数据导出，保存到localstorage或indexedDB中，刷新好后再取出数据保存回pinia中。

window.addEventListener('beforeunload', () => {
  window.sessionStorage.setItem('state', JSON.stringify(store.state));
});

// 当storage被修改时触发
window.addEventListener('storage', function () {
  window.sessionStorage.clear();
  window.location.replace("/");
});

window.addEventListener('load', () => {
  let data = window.sessionStorage.getItem('state');
  data = JSON.parse(data);
  // 要commit回去，在pinia中在把数据赋值回去
  console.log(data);
});