Pinia的使用方法及持久化存储

一、Pinia是什么？

适合那些想要一个简单、轻量级的状态管理库的开发者
pinia是一个用于vue的轻量级的状态管理库，类似于vuex,是vue的另一种状态管理工具

二、Pinia和vuex的区别

pinia

• Pinia专注于提供一个简单的API来管理应用程序的状态，提供了 Composition-API 风格 的 API
• 最重要的是在与 TypeScript 一起使用时具有可靠的类型推断支持
• Pinia基于Vue 3的Composition API构建的，更加灵活和可组合
• Pinia采用了类似于React Hooks的方式来管理状态，更加直观和易于使用

四大核心属性：
设置状态 state
获取内容 getters
修改数据 actions
插件辅助 plugins

优点：

• 更加轻量级，因为它不需要使用 Vuex 的一些复杂的概念
• 更加简单易用：Pinia 的 API 设计更加简单易用，因为它使用了 Vue.js 3 的新特性，如 Composition API
• Pinia 提供了更加灵活的状态管理方式，因为它支持多个 store 实例，而 Vuex 只支持一个 store 实例

缺点：

• Pinia 是一个相对较新的状态管理库，因此它可能存在一些未知的问题和限制。
• 由于 Pinia 是一个相对较新的库，它的生态系统可能不够完善，因此可能需要花费更多的时间来解决问题。

Vuex

• Vuex是一个更完整的状态管理库，它提供了更多的功能，比如模块化、插件和严格模式等等
• Vuex则是基于Vue 2的Options API构建的，因此在某些方面可能会受到限制
• Vuex则采用了一种基于mutations和actions的方式来管理状态，这可能需要更多的代码来实现相同的功能

七大核心属性：
设置状态 state
获取内容 getters
修改数据 mutations
异步操作actions
模块拆分modules
插件辅助 plugins
命名空间namespaced

优点：

• Vuex 是一个比较成熟的状态管理库，它已经被广泛使用和测试。
• Vuex 的稳定性也比 Pinia 更高，因为它已经经过了多个版本的迭代和改进。
• Vuex 提供了一些高级功能，如中间件和插件，使得它可以处理更加复杂的状态管理需求。

缺点：

• Vuex 的概念比较复杂，因此学习曲线比较陡峭。
• Vuex 在处理一些简单的状态管理需求时可能会有些繁琐，因为它需要使用一些复杂的概念和 API

二、如何使用

1、安装pinia（仅限于Vue3）

npm i pinia

2、配置

1、在src目录下新建一个stroe文件夹，在文件夹中新建一个index.ts

2、通过import引入到pinia到index文件中并导出

import { createPinia, defineStore } from 'pinia'
export const Pinia = createPinia()
export default defineStore('admin', {
//这里的state与vue2中用来存放初始化变量的data的写法相似，需要return
 state: () => {
        return {
            count: 10,
        }
    },
 getters: {
        count: state => state.count
      },
//actions 相当于组件中的 methods。
//可以使用 defineStore() 中的 actions 属性定义
  actions: {
  
        }
    },
)

3、在main.js入口文件进行注册

import { createApp } from 'vue'
import App from './App.vue'
import {createPinia} from 'pinia'

const pinia = createPinia()

createApp(App).use(pinia).mount('#app')

三、持久化存储 参考 GitHub

1、使用您常用的软件包管理器安装

pnpm : pnpm i pinia-plugin-persistedstate
npm : npm i pinia-plugin-persistedstate
yarn : yarn add pinia-plugin-persistedstate

2、将插件添加到pinia

import { createApp } from 'vue'
import App from './App.vue'
import {createPinia} from 'pinia'

//pinia数据持久化  下载插件
// npm i pinia-plugin-persistedstate
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

createApp(App).use(pinia).mount('#app')

3、将“持久化”选项添加到要持久化的存储中

import { defineStore } from 'pinia'

export const useStore = defineStore('store', {
  state: () => {
    return {
      someState: 'hello pinia',
    }
  },
  persist: true, //开启
})

刷新数据不丢失