Vue3中的存储库pinia概述

npm install pinia

import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
import { createPinia } from "pinia";
const pinia = createPinia();
app.use(pinia);
app.mount("#app");

// 想要使用必须先引入 defineStore；
import { defineStore } from 'pinia';
// 这里我们使用的是es6 的模块化规范进行导出的。
// defineStore 方法有两个参数
// 第一个参数是模块化名字（也就相当于身份证一样，不能重复）
// 第二个参数是选项，对象里面有三个属性，相比于vuex 少了一个 mutations.
export const useStore = defineStore('main', {
  state:()=> {  // 存放的就是模块的变量
    return {
      name: "小猪课堂",
      age: 25,
      sex: "男",
      num:13
    }
  },
  getters: { // 相当于vue里面的计算属性，可以缓存数据
  },
  actions: { // 可以通过actions 方法，改变 state 里面的值。
  }
})

<template>
  <p>姓名：{{ name }}</p>
  <p>年龄：{{ age }}</p>
  <p>性别：{{ sex }}</p>
</template>
<script setup lang="ts">
    import { ref } from "vue";
    import { useUsersStore } from "../src/store/user";
    const store = useUsersStore();
    const name = ref<string>(store.name);
    const age = ref<number>(store.age);
    const sex = ref<string>(store.sex);
</script>

<template>
  <h1>
    <!-- 使用pinia -->
    {{ count }} <br />
    {{ num }} <br />
    <input type="text" v-model="count">
  </h1>
</template>
<script lang="ts" setup>
// 引入pinia
import { useStoreIndex } from "@/store/index";
// storeToRefs将state中的变量解构出来，解构出来的数据是双向联动的，是ref对象
import { storeToRefs } from "pinia";
let store = useStoreIndex()
// 两种方法都可以解构出来state数据，但是普通解构出来的无法实现双向联动
const { count, num } = storeToRefs(store);
</script>

const handleAdd = () => {
  // 方法1
  // store.name=李四
  // 方法2：可以同时修改多个数据
  store.$patch({
    sex: store.sex + 1,
    num:store.num+10
  });
};

npm install pinia-plugin-persist

// 1 引入pinia，并解构赋值其中的createPinia 方法
import { createPinia } from 'pinia';
const pinia = createPinia();
// 引入持久化存储插件
import piniaPersist from 'pinia-plugin-persist'
// 在pinia中使用持久化存储插件
pinia.use(piniaPersist);
// 2 在vue实例中使用pinia
app.use(pinia)

persist: { // 开启存储
    enabled: true,
    // 配置持久化
    strategies: [
      {
        // key是属性，可以省略，省略默认是defineStore第一个属性main
        key:"zx",
        // 指定存储的位置以及存储的变量都有哪些，该属性可以不写，
        //在不写的情况下，默认存储到 sessionStorage 里面,默认存储 state 里面的所有数据。
        storage: localStorage,
        // paths 是一个数组，如果写了 就会只存储 count 变量，当然也可以写多个。
        paths: ["count", "num", "token", "userName"]
      },
    ]
  },