pinia初始化

安装pinia

# 使用 npm
npm install pinia

# 使用 yarn
yarn add pinia
# 使用 pnpm

pnpm add pinia

创建 Pinia 实例：

文件路径: stores/index.js

import { createPinia } from 'pinia'

const pinia = createPinia()

export default pinia

文件路径：main.js

import { createApp } from 'vue'
const app = createApp(App)
import App from './App.vue'
+ import pinia from '@/stores/index.js'
+ app.use(pinia)
app.mount('#app')

定义状态模块

在应用程序中，创建一个或多个状态模块。可以将每个模块放在单独的文件中

文件路径：stores/counter.js

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  },
  getters: {
    doubleCount() {
      return this.count * 2
    }
  }
})

导入状态模块

文件路径：stores/index.js

import { createPinia } from 'pinia'

const pinia = createPinia()

export default pinia

// 统一导出
export * from './counter.js'

组件中访问状态、操作和计算属性

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment()">Increment</button>
  </div>
</template>

<script setup>
import { useCounterStore } from '@/store/index.js'

const counter = useCounterStore()

const count = counter.count
const doubleCount = counter.doubleCount
const increment = counter.increment
</script>

开启Pinia持久化存储

安装持久化库

npm install pinia-plugin-persistedstate
或
pnpm add pinia-plugin-persistedstate

文件路径：stores/index.js

import { createPinia } from 'pinia'
+ import persist from 'pinia-plugin-persistedstate'

const pinia = createPinia()
//开启持久化存储
+ pinia.use(persist)
export default pinia
//统一导出
export * from './MnemonicWord'

状态模块

import { defineStore } from 'pinia'

export const useMnemonicWordStore = defineStore('cp-MnemonicWord', {
  state: () => ({
    count: 0
  }),
  actions: {},
  getters: {},
 + persist: true // 开启持久化存储
})

pinia-plugin-persistedstate库介绍

pinia-plugin-persistedstate 是一个用于在 Pinia 中实现状态持久化的库。它提供了一种简单的方式来将应用程序的状态保存在浏览器的本地存储（如 localStorage 或 sessionStorage）中，并在应用重新加载时自动还原这些状态。

该库的主要作用是为 Pinia 提供持久化存储的能力，具体包括以下功能：

状态自动持久化：通过将插件应用到 Pinia 实例中，该插件会自动监听所有存储模块的状态变化，并将这些状态保存到浏览器的本地存储中。这样，无论是页面刷新还是关闭再打开应用，存储的状态都能够被恢复。
简化配置：使用 pinia-plugin-persistedstate 可以轻松配置哪些存储模块的状态需要进行持久化。通过在存储模块定义中设置 persist 选项为 true 或者指定需要持久化的属性路径，即可实现相应的持久化设置。
自定义存储引擎：除了默认的 localStorage 和 sessionStorage，pinia-plugin-persistedstate 还允许你通过配置自定义的存储引擎，如 IndexedDB 或其他自定义实现的存储引擎。
序列化与反序列化：该库提供了可选的序列化和反序列化的回调函数，允许你自定义状态的序列化和反序列化逻辑。这在处理特殊类型的状态或需要对状态进行加密时非常有用。

通过使用 pinia-plugin-persistedstate，你可以轻松地为你的 Pinia 应用程序启用持久化存储功能，确保状态的持久性和可靠性。它简化了状态管理中的持久化需求，并提供了灵活的配置选项来满足不同的使用场景。

为什么pinia中 actions内函数无法通过参数访问 state函数内属性？？

这里和Vuex不一样，在Pinia中，actions是用于执行异步操作和调用其他actions或mutations的方法。它们的设计目的是为了处理逻辑和操作，并且默认情况下是无法直接访问state内的属性的。

原因如下：

分离逻辑和状态：Pinia的设计目标之一是分离逻辑和状态。通过将状态放在state对象中，而将逻辑放在actions中，可以使代码更加清晰和可维护。将逻辑与状态分开可以更好地组织代码，并使代码更具可测试性和可扩展性。
异步操作和副作用：actions通常用于执行异步操作、与后端进行通信或处理副作用。这些操作可能涉及多个步骤、异步请求或复杂的逻辑。因此，将状态访问和修改的职责保留在actions之外有助于更好地管理异步操作和副作用。

虽然默认情况下actions无法直接访问state内的属性，但您仍然可以通过使用this关键字来访问存储对象的state属性。这种设计决策有助于保持代码的一致性，并鼓励将逻辑和状态分离，以提高代码的可维护性和可测试性。

pinia内 actions 和 getters内的函数怎么访问 state函数内属性？

1.actions

在Pinia中，存储对象的状态是通过this关键字来访问的，而不是通过state参数。在这种情况下，this.MnemonicWord将访问到存储对象的MnemonicWord属性。

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
   AccessCount(){ 
   console.log(this.count) // 0
   }
  }
})

2.getters

在Pinia中，您可以通过getters函数中的第一个参数来访问存储对象的state内的属性。该参数被称为getters对象，其中包含了所有的getters函数。

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  getters: {
    AccessCount: (state) => {
     console.log(state.count) // 0
    }
  }
})

Pinia内 getters内函数怎么接收参数？

在Pinia中，getters函数不直接接收参数，但可以使用闭包或返回一个函数来实现接收参数。

1.使用闭包：

可以在getters函数外部定义一个接收参数的函数，并在闭包中引用该参数。然后，在getters函数内部返回一个函数，该闭包函数可以访问存储对象的状态和传递的参数。

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  getters: {
    getMnemonicWordLength: (state) => (param) => {
      console.log(param) //123456
    }
  }
})

Vue组件内

import { useCounterStore } from '@/stores/index.js'
const store = useCounterStore()
store.getMnemonicWordLength('123456')

2.返回函数：

可以直接在getters中返回一个函数，该函数接收参数并访问存储对象的状态。两种方式箭头函数或普通函数

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  getters: {
  
   //箭头函数
    getMnemonicWordLength: (state) => {
      return (param) => {
          console.log(param) //123456
      };
    }
    
  },
  
  //普通函数
   getMnemonicWordLength () {
      return function (param) {
        console.log(param) //123456
      }
    }
  
})