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 的模塊化規(guī)范進(jìn)行導(dǎo)出的。
// defineStore 方法有兩個(gè)參數(shù)
// 第一個(gè)參數(shù)是模塊化名字（也就相當(dāng)于身份證一樣，不能重復(fù)）
// 第二個(gè)參數(shù)是選項(xiàng)，對(duì)象里面有三個(gè)屬性，相比于vuex 少了一個(gè) mutations.
export const useStore = defineStore('main', {
  state:()=> {  // 存放的就是模塊的變量
    return {
      name: "小豬課堂",
      age: 25,
      sex: "男",
      num:13
    }
  },
  getters: { // 相當(dāng)于vue里面的計(jì)算屬性，可以緩存數(shù)據(jù)
  },
  actions: { // 可以通過(guò)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中的變量解構(gòu)出來(lái)，解構(gòu)出來(lái)的數(shù)據(jù)是雙向聯(lián)動(dòng)的，是ref對(duì)象
import { storeToRefs } from "pinia";
let store = useStoreIndex()
// 兩種方法都可以解構(gòu)出來(lái)state數(shù)據(jù)，但是普通解構(gòu)出來(lái)的無(wú)法實(shí)現(xiàn)雙向聯(lián)動(dòng)
const { count, num } = storeToRefs(store);
</script>

const handleAdd = () => {
  // 方法1
  // store.name=李四
  // 方法2：可以同時(shí)修改多個(gè)數(shù)據(jù)
  store.$patch({
    sex: store.sex + 1,
    num:store.num+10
  });
};

npm install pinia-plugin-persist

// 1 引入pinia，并解構(gòu)賦值其中的createPinia 方法
import { createPinia } from 'pinia';
const pinia = createPinia();
// 引入持久化存儲(chǔ)插件
import piniaPersist from 'pinia-plugin-persist'
// 在pinia中使用持久化存儲(chǔ)插件
pinia.use(piniaPersist);
// 2 在vue實(shí)例中使用pinia
app.use(pinia)

persist: { // 開(kāi)啟存儲(chǔ)
    enabled: true,
    // 配置持久化
    strategies: [
      {
        // key是屬性，可以省略，省略默認(rèn)是defineStore第一個(gè)屬性main
        key:"zx",
        // 指定存儲(chǔ)的位置以及存儲(chǔ)的變量都有哪些，該屬性可以不寫(xiě)，
        //在不寫(xiě)的情況下，默認(rèn)存儲(chǔ)到 sessionStorage 里面,默認(rèn)存儲(chǔ) state 里面的所有數(shù)據(jù)。
        storage: localStorage,
        // paths 是一個(gè)數(shù)組，如果寫(xiě)了 就會(huì)只存儲(chǔ) count 變量，當(dāng)然也可以寫(xiě)多個(gè)。
        paths: ["count", "num", "token", "userName"]
      },
    ]
  },