import { defineStore } from 'pinia'

export const todos = defineStore('todos', {
  state: () => ({
    /** @type {{ text: string, id: number, isFinished: boolean }[]} */
    todos: [],
    /** @type {'all' | 'finished' | 'unfinished'} */
    filter: 'all',
    // type will be automatically inferred to number
    nextId: 0,
  }),
  getters: {
    finishedTodos(state) {
      // autocompletion! ?
      return state.todos.filter((todo) => todo.isFinished)
    },
    unfinishedTodos(state) {
      return state.todos.filter((todo) => !todo.isFinished)
    },
    /**
     * @returns {{ text: string, id: number, isFinished: boolean }[]}
     */
    filteredTodos(state) {
      if (this.filter === 'finished') {
        // call other getters with autocompletion ?
        return this.finishedTodos
      } else if (this.filter === 'unfinished') {
        return this.unfinishedTodos
      }
      return this.todos
    },
  },
  actions: {
    // any amount of arguments, return a promise or not
    addTodo(text) {
      // you can directly mutate the stat 00e
      this.todos.push({ text, id: this.nextId++, isFinished: false })
    },
  },
})

PS C:\Users\FORGET\Desktop\vue-pinia-demo> npm init vite@latest
Need to install the following packages:
  create-vite@latest
Ok to proceed? (y) y
√ Project name: ... pinia-demo
√ Select a framework: ? vue
√ Select a variant: ? vue-ts

Scaffolding project in C:\Users\FORGET\Desktop\vue-pinia-demo\pinia-demo...

Done. Now run:

  cd pinia-demo
  npm install
  npm run dev
PS C:\Users\FORGET\Desktop\vue-pinia-demo> cd .\pinia-demo\
PS C:\Users\FORGET\Desktop\vue-pinia-demo\pinia-demo> npm install

# package.json文件中
 "dependencies": {
    "pinia": "^2.0.9",
    "vue": "^3.2.25"
  },

// main.ts 文件
import { createApp } from 'vue'
import App from './App.vue'
import {createPinia} from 'pinia'
// 創(chuàng)建 Pinia 實例
const pinia = createPinia()
// 創(chuàng)建 Vue 實例
const app = createApp(App)
// 掛載到 Vue 根實例
app.use(pinia)
app.mount('#app')

// store/index.ts
import { defineStore } from 'pinia'
// 1. 定義容器、導(dǎo)出容器
// 參數(shù)1：容器的ID，必須是唯一的，后面Pinia會把所有的容器掛載到根容器
// 參數(shù)2：一些選項對象，也就是state、getter和action
// 返回值：一個函數(shù)，調(diào)用即可得到容器實例

export const useMainStore =  defineStore('main',{
    // 類似于Vue2組件中的data，用于存儲全局狀態(tài)數(shù)據(jù)，但有兩個要求
    // 1. 必須是函數(shù)，目的是為了在服務(wù)端渲染的時候避免交叉請求導(dǎo)致的數(shù)據(jù)狀態(tài)污染
    // 2. 必須是箭頭函數(shù)，這樣是為了更好的 TS 類型推導(dǎo)
    state:()=>{
        return {
            info:"pinia 可以使用"
        }
    },
    getters:{},
    actions:{}
})

// 2. 使用容器中的 state
// 3. 通過 getter 修改 state 
// 4. 使用容器中的 action 同步和異步請求

<template>
  <h1>{{ mainStore.info}}</h1>
</template>

<script lang="ts" setup>
import { useMainStore } from "../store";
const mainStore = useMainStore();
</script>

<style>
</style>

// store/index.ts
state:()=>{
        return {
            info:"pinia 可以使用",
            count:10
        }
    },

<template>
  <h1>{{ mainStore.count }}</h1>
  <h1>{{ mainStore.info }}</h1>
  <hr />
  <h1>{{ count }}</h1>
  <h1>{{ info }}</h1>
  <p>
    <button @click="alertData">修改數(shù)據(jù)</button>
  </p>
</template>

<script lang="ts" setup>
import { toRefs } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore } from "../store";
const mainStore = useMainStore();
// 解構(gòu)數(shù)據(jù)，但是得到的數(shù)據(jù)是不具有響應(yīng)式的，只是一次性的
// 相當于僅僅只是...mainStore而已，只是做了reactive處理，并沒有做toRefs
// const { count, info } = useMainStore();
// 解決方法：
// 1. 通過使用toRefs函數(shù)，因為前面所說相當于是通過reactive處理，因此可以
// const { count, info } = toRefs(mainStore);
// 2. 通過pinia中提供的storeToRefs方法來解決，推薦使用
const { count, info } = storeToRefs(mainStore);
const alertData = () => {
  mainStore.count += 10
}
</script>

<style>
</style>

const alertData = () => {
  // 方式一：最簡單的方法，如下
  // 解構(gòu)后更改方式
  // count.value += 10
  // 結(jié)構(gòu)前更改方式
  // mainStore.count += 10
  // 方式二：若要同時修改多個數(shù)據(jù)，建議使用$patch來實現(xiàn)批量更新，在內(nèi)部做了優(yōu)化
  // mainStore.$patch({
  //   count: mainStore.count + 1,
  //   info: "hello"
  // })
  // 方式三：更好的批量更新方法，通過$patch傳遞一個函數(shù)來實現(xiàn)，這里的state就是useMainStore容器中的state
  mainStore.$patch(state => {
    state.count += 10
    state.info = "pinia批量更新"
  })
}

// store/index.ts
// 類似于vue2組件的methods，用于封裝業(yè)務(wù)邏輯，修改state
// // 注意：不能使用箭頭函數(shù)來定義actions，因為箭頭函數(shù)綁定外部的this
    actions:{
        changeState (){
            this.count += 10
            this.info = "actions修改數(shù)據(jù)"
        },
        changeStates (num:number){
            this.count += num + 2
            this.info = "actions修改數(shù)據(jù)"
        }
    }

const alertData = () => {
  // 方式一：最簡單的方法，如下
  // 解構(gòu)后更改方式
  // count.value += 10
  // 結(jié)構(gòu)前更改方式
  // mainStore.count += 10
  // 方式二：若要同時修改多個數(shù)據(jù)，建議使用$patch來實現(xiàn)批量更新，在內(nèi)部做了優(yōu)化
  // mainStore.$patch({
  //   count: mainStore.count + 1,
  //   info: "hello"
  // })
  // 方式三：更好的批量更新方法，通過$patch傳遞一個函數(shù)來實現(xiàn)，這里的state就是useMainStore容器中的state
  // mainStore.$patch(state => {
  //   state.count += 10
  //   state.info = "pinia批量更新"
  // })
  // 方式四：通過 actions 來修改數(shù)據(jù)
  mainStore.changeState()
  mainStore.changeStates(10)
}

// 類似于組件的computed，用來封裝計算屬性，具有緩存的功能
    getters:{
    	 // 函數(shù)接收一個可選參數(shù)：state狀態(tài)對象
        count10(state){
            return state.count += 10
        },
        count10(state){
            return this.count += 10
        },
        // 若使用this.count，則必須指明返回數(shù)據(jù)的類型
        count11():number{
            return this.count += 11
        }
    },

<h1>{{ mainStore.count10 }}</h1>

import { defineStore } from 'pinia';
const useLoginStore = defineStore({
  id: 'login',
  //   state: () => ({
  //     num: 1,
  //   }),
  state: () => ({
    info: 'pinia 可以使用',
  }),
  getters: {},
  actions: {
    alertInfo() {
      this.info = '可以可以，這個秒';
    },
  },
});

// 數(shù)據(jù)持久化
// 1. 保存數(shù)據(jù)
const instance = useLoginStore();
instance.$subscribe((_, state) => {
  localStorage.setItem('login-store', JSON.stringify({ ...state }));
});
// 2. 獲取保存的數(shù)據(jù)，先判斷有無，無則用先前的
const old = localStorage.getItem('login-store');
if (old) {
  instance.$state = JSON.parse(old);
}
export default useLoginStore;

# 安裝插件
pnpm install pinia-plugin-persist --save

// main.ts文件中
import { createPinia } from 'pinia';
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import piniaPluginPersist from 'pinia-plugin-persist';
const pinia = createPinia();
pinia.use(piniaPluginPersist);
const app = createApp(App);
app.use(router);
app.use(pinia);
app.mount('#app');

// 接著在對應(yīng)的 store 里開啟 persist 即可。數(shù)據(jù)默認存在 sessionStorage 里，并且會以 store 的 id 作為 key。
import { defineStore } from 'pinia';
import piniaPluginPersist from 'pinia-plugin-persist';
const useLoginStore = defineStore({
  id: 'login',
  //   state: () => ({
  //     num: 1,
  //   }),
  state: () => ({
    info: 'pinia 可以使用',
  }),
  // 開啟數(shù)據(jù)緩存
  persist: {
    enabled: true,
  },
  getters: {},
  actions: {
    alertInfo() {
      this.info = '可以可以，這個秒';
    },
  },
});
export default useLoginStore;

// 開啟數(shù)據(jù)緩存
  persist: {
    enabled: true,
    strategies: [
      {
        // 自定義名稱
        key: 'login_store',
        // 保存位置，默認保存在sessionStorage
        storage: localStorage,
        // 指定要持久化的數(shù)據(jù)，默認所有 state 都會進行緩存，你可以通過 paths 指定要持久化的字段，其他的則不會進行持久化。
        paths: ['age'],
      },
    ],
  },