Vue3中的pinia使用（收藏版）

本文详细介绍了Pinia状态管理库的使用方法，包括基本概念、安装配置、数据持久化等核心内容，并通过实例展示了如何在Vue项目中高效利用Pinia进行状态管理。


pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。就是和vuex一样的实现数据共享。
依据Pinia官方文档，Pinia是2019年由vue.js官方成员重新设计的新一代状态管理器，更替Vuex4成为Vuex5。
Pinia 目前也已经是 vue 官方正式的状态库。适用于 vue2 和 vue3。可以简单的理解成 Pinia 就是 Vuex5。也就是说， Vue3 项目，建议使用Pinia。
————————————————



Pinia 的优点


pinia 符合直觉，易于学习。
pinia 是轻量级状态管理工具，大小只有1KB.
pinia 模块化设计，方便拆分。
pinia 没有 mutations，直接在 actions 中操作 state，通过 this.xxx 访问响应的状态，尽管可 以直接操作 state，但是还是推荐在 actions 中操作，保证状态不被意外的改变。
store 的 action 被调度为常规的函数调用，而不是使用 dispatch 方法或者是 MapAction 辅助函数，这是在 Vuex 中很常见的。
支持多个 store。
支持 Vue devtools、SSR、webpack 代码拆分。
————————————————

2.pinia基本使用

1. 首先先安装依赖

npm install pinia

1. 在main.js中引入pinia并创建容器挂载到根实例上

//引入stores暴露出的pinia的实例import pinia from './stores'
createApp(App).use(pinia).mount('#app')

1. 创建stores文件夹和index.js文件（这个文件以后基本不用管了）

import { createPinia } from "pinia";
const pinia = createPinia()
export default pinia



在stores文件夹下创建counter.js文件。这个文件就是存有关counter相关的数据。（类似vuex的模块化）
defineStore 是需要传参数的，


第一个参数是id，就是一个唯一的值，简单点说就可以理解成是一个命名空间.
第二个参数就是一个对象，里面有三个模块需要处理，第一个是 state，第二个是 getters，第三个是 actions。
————————————————



//定义关于counter的storeimport {defineStore} from 'pinia'

/*defineStore 是需要传参数的，其中第一个参数是id，就是一个唯一的值，
简单点说就可以理解成是一个命名空间.第二个参数就是一个对象，里面有三个模块需要处理，第一个是 state，
第二个是 getters，第三个是 actions。*/
const useCounter = defineStore("counter",{    state:() => ({
        count:66,    }),
        getters: {

   },

   actions: {

   }
})

//暴露这个useCounter模块export default useCounter

1. 然后再组件中使用：

<template> <!-- 在页面中直接使用就可以了 不用 .state-->
  <div>展示pinia的counter的count值：pw_counterStore.count</div>

</template>

<script setup>// 首先需要引入一下我们刚刚创建的store
import useCounter from '../stores/counter'// 因为是个方法，所以我们得调用一下
const counterStore = useCounter()

</script>


                        
原文链接：https://blog.csdn.net/weixin_57677300/article/details/128217096

https://blog.csdn.net/weixin_57677300/article/details/128217096?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522fc16e4a64f8eed9d9a56fb2ed5c29c6f%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=fc16e4a64f8eed9d9a56fb2ed5c29c6f&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-128217096-null-null.142^v102^pc_search_result_base7&utm_term=vue3pinia%E4%BD%BF%E7%94%A8&spm=1018.2226.3001.4187