【Vue3】状态管理工具——pinia的使用

目录

搭建pinia环境

存储数据

组件中使用数据

修改数据

storeToRefs

$subscribe


pinia相当于vue2中的vuex,pinia也是vue.js状态管理库。

搭建pinia环境

下载

npm install pinia

创建

src/main.js

import { createApp } from 'vue'
import App from './App.vue'
 
/* 引入createPinia,用于创建pinia */
import { createPinia } from 'pinia'
 
/* 创建pinia */
const pinia = createPinia()
const app = createApp(App)
 
/* 使用插件 */
app.use(pinia)
app.mount('#app')

存储数据

它有三个概念:store、getters、actions,相当于组件中的data、computed和methods。

src/store/count.js

// 引入defineStore用于创建store
import {defineStore} from 'pinia'
 
// 定义并暴露一个store
export const useCountStore = defineStore('count',{
  // 动作
  actions:{
    increment(value) {
      this.sum += value
    }
  },
  // 状态
  state(){
    return {
### Vue3 Pinia 调试工具 对于Vue3项目中的Pinia状态管理,调试工具有助于开发人员更高效地理解和维护应用的状态逻辑。当创建一个新的Vue3项目时,可以使用Vite来初始化环境[^1]: ```bash npm create vue@latest ``` 安装并配置Pinia后,在某些情况下,默认的`vue-devtools`可能不会自动识别Pinia插件,这可能导致无法查看或修改存储的数据。为了使`vue-devtools`能够正常工作并与Pinia集成,更新后的配置方法如下所示[^2]: ```javascript import { createApp } from 'vue'; import App from './App.vue'; import { createPinia } from 'pinia'; const app = createApp(App); app.use(createPinia()).mount("#app"); ``` 值得注意的是,如果直接解构来自store的对象属性而不做任何额外处理,则可能会破坏这些属性原有的响应特性。因此建议不要简单地通过解构赋值的方式来获取store内的变量,除非已经采取措施保持其反应能力[^3]。 在实际操作过程中,除了上述提到的方法外,还可以利用浏览器扩展程序如官方支持的`Vue Devtools`来进行更加深入细致的应用分析。确保已安装最新版本的devtools,并且它兼容当前使用的框架版本。另外,也可以考虑借助其他第三方库或者自定义日志记录函数辅助排查问题所在。 #### 安装和启用Vue DevTools 要让开发者能够在Chrome或其他基于Chromium内核的浏览器上更好地调试应用程序,推荐安装由Vue团队提供的专用DevTools扩展。该工具不仅限于观察组件树结构变化,还特别针对Vuex/Pinia这样的全局状态管理系统提供了专门的支持面板,方便追踪actions、mutations以及getters等事件的发生情况。 一旦完成安装过程,重启浏览器实例以加载新的功能模块;随后打开目标网页页面,按下F12键唤起开发者控制台界面,切换到“Vue”标签页下就能看到有关整个项目的概览信息了。 #### 配置Pinia以便与Vue DevTools协作 为了让Pinia能被Vue DevTools正确检测到,需确认所依赖的核心包均已升级至最新的稳定版次。此外,还需注意检查是否存在潜在冲突项影响二者之间的交互效果——比如旧式的 Vuex 插入语句就有可能干扰新机制下的运作流程。 最后提醒一点,尽管现代前端工程化方案倾向于推崇热重载(HMR),但在涉及复杂业务场景尤其是涉及到多级嵌套作用域的情况下,仍有必要适时关闭此选项以免造成不必要的困扰。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值