vue3.0 安装使用pinia 以及pinia的持久化

1.下载依赖

npm install pinia

2.在src下面创建store/index.ts文件

import { createPinia } from "pinia";

// 创建
const pinia = createPinia();

// 导出
export default pinia;

3.在src下面在创建store/useMyStore.ts文件

import { defineStore } from "pinia";
interface userFormType {
  user: string;
  id: string;
  age: string;
  sex: string;
}
interface State {
  userForm: userFormType;
}

export const useMyStore = defineStore("userForm", {
  state: (): State => ({
    userForm: {
      user: "",
      id: "",
      age: "",
      sex: "",
    },
    // 其他状态
  }),
  getters: {
    // 获取用户信息
    userInfo(): userFormType {
      return this.userForm;
    },
  },
  actions: {
    // 修改用户信息
    setUserInfo(data: userFormType) {
      this.userForm = data;
    },
  },
});

4. 修改main.ts 

5.页面基本使用

<template>
    <div class="p-4">
        <!-- 页面使用 -->
        <div>{{ useStore.userForm }}</div>
        <button @click="setStore">设置stroe</button>
        <button @click="getStore">获取stroe</button>
    </div>
</template>
<script setup lang="ts">
// 先导入
import { useMyStore } from "@/store/useMyStore";
// 实例化
const useStore = useMyStore()
// 设置数据
let setStore = () => {
    useStore.setUserInfo({
        user: "张三",
        id: "1",
        age: "18",
        sex: "男",
    });
};
// 获取数据
let getStore = () => {
    console.log(useStore.userInfo);
};
</script>
<style lang="scss"></style>

6.pinia的api方法 $subscribe $onAction监听修改

<template>
    <div class="p-4">
        <!-- 页面使用 -->
        <div>{{ useStore.userForm }}</div>
        <el-button @click="setStore">设置stroe</el-button>
        <el-button @click="getStore">获取stroe</el-button>
        <el-button @click="resetStore">重置stroe</el-button>
    </div>
</template>
<script setup lang="ts">
// 先导入
import { useMyStore } from "@/store/useMyStore";
// 实例化
const useStore = useMyStore()
// 设置数据
let setStore = () => {
    useStore.setUserInfo({
        user: "张三",
        id: "1",
        age: "18",
        sex: "男",
    });
};
// 获取数据
let getStore = () => {
    console.log(useStore.userInfo);
};
// 重置数据
let resetStore = () => {
    useStore.$reset();
};
// 用来监听state值改变
useStore.$subscribe((args, state) => {
    console.log('state值改变',args, state);
}, {
    detached: true,
    deep: true,
    flush: 'post'
});
// 用来监听action方法调用
useStore.$onAction((args) => {
    args.after(() => {
        console.log("action调用后");
    });
}, true);
</script>
<style lang="scss"></style>

7. pinia的持久化

7.1 下载依赖

npm i pinia-plugin-persistedstate

7.2 在初始化Pinia时，使用pinia-plugin-persistedstate插件来配置数据持久化

import { createPinia } from "pinia";
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' //引入持久化插件
// 创建
const pinia = createPinia();

// 使用插件
pinia.use(piniaPluginPersistedstate);

// 导出
export default pinia;

7.3  持久化配置

import { defineStore } from "pinia";
interface userFormType {
  user: string;
  id: string;
  age: string;
  sex: string;
}
interface State {
  userForm: userFormType;
}

export const useMyStore = defineStore("userForm", {
  state: (): State => ({
    userForm: {
      user: "",
      id: "",
      age: "",
      sex: "",
    },
  }),
  getters: {
    // 获取用户信息
    userInfo(): userFormType {
      return this.userForm;
    },
  },
  actions: {
    // 修改用户信息
    setUserInfo(data: userFormType) {
      this.userForm = data;
    },
  },
  // persist:true, // 整个 Store 将使用默认持久化配置保存。
  persist: {
    key: "userForm", //存储名称
    storage: localStorage, // 存储方式
    paths: ["userForm"], //指定 state 中哪些数据需要被持久化。[] 表示不持久化任何状态，undefined 或 null 表示持久化整个 state
  },
});