首页 > 其他分享 >关于Pinia 使用setup方式书写 $reset方法失效问题

关于Pinia 使用setup方式书写 $reset方法失效问题

时间:2023-12-18 17:13:59浏览次数:28  
标签:reset const pinia setup state Pinia store

在当我使用的时候踩到一个坑:
当我在使用$reset想要重置state数据的时候,却报错了,经过排查发现 是因为没有使用选项式进行编写代码
关于$reset方法Pinia文档中只有简短的介绍:

您可以通过调用 store 上的 $reset() 方法将状态 重置 到其初始值:

const store = useStore()
store.$reset()

解决方法如下:

使用选项式:
export const useUserStore=defineStore('user',{
  state:()=>{
    num:0
  },
  action:{}
})

但是如果就想使用组合式进行编写的话,需要在main文件中 重写$reset方法

import { createPinia } from 'pinia';
const pinia = createPinia();

pinia.use(({ store }) => {
	const initialState = JSON.parse(JSON.stringify(store.$state));
	store.$reset = () => {
		store.$patch(initialState);
	};
});

标签:reset,const,pinia,setup,state,Pinia,store
From: https://www.cnblogs.com/zxl327/p/17911670.html

相关文章

  • pinia初学习
    pinia两种写法定义pinia第一种:对象形式不需要写refstate直接就是响应式数据import{defineStore}from"pinia"exportconstuseCounterStore=defineStore("useCounterStore",{state:()=>{return{}},actions:{......
  • 在ts文件中使用pinia
    我们在vue组件中使用pinia时,可以通过下面代码来实现<scriptlang="ts"setup>import{useUserStore}from"@/store/userStore"constuserStore=useUserStore()</script>但是我们在ts/js文件中想要使用pinia时,会发现它会报警告,如下 解决方法importstorefrom"@/st......
  • Vue3 setup 方法的一些基本使用总结
    官网介绍:https://cn.vuejs.org/api/composition-api-setup.html基本使用setup()钩子是在组件中使用组合式API的入口,通常只在以下情况下使用:需要在非单文件组件中使用组合式API时。需要在基于选项式API的组件中集成基于组合式API的代码时。setup方法返回值:返回一......
  • Windows下获取设备管理器列表信息-setupAPI
    背景及问题:在与硬件打交道时,经常需要知道当前设备连接的硬件信息,以便连接正确的硬件,比如串口通讯查询连接的硬件及端口,一般手工的方式就是去设备管理器查看相应的信息,应用程序如何读取这一部分信息呢,Windows下的SetupAPI系列就可以解决这个问题示例程序#include<Windows.h>#......
  • nerdctl run -d 报"failed to call cni.Setup: plugin type=\"bridge\" failed (ad
    背景:执行 nerdctl run-d --namenginx-p8080:80nginx时,报如下错误FATA[0000]failedtocreateshimtask:OCIruntimecreatefailed:runccreatefailed:unabletostartcontainerprocess:errorduringcontainerinit:errorrunninghook#0:errorrunningh......
  • VUE3引入pinia配置使用
    文档:https://pinia.vuejs.org/zh/introduction.html1.引入pinnanpminstallpinia-S2.在src文件里面创建store文件article.js在main.js中引用pinnaimport{defineStore}from'pinia'//你可以对`defineStore()`的返回值进行任意命名,但最好使用store的名字,同时以......
  • vue3引入pinia
    1、npminstallpinia2、在项目目录建store文件夹创index.jsimport{createPinia,defineStore}from"pinia";constpinia=createPinia()pinia.state.valueconsttoken=defineStore('token',{state(){return{token:null}......
  • Vite4+Typescript+Vue3+Pinia 从零搭建(6) - 状态管理pina
    项目代码同步至码云weiz-vue3-templatepina是vue3官方推荐的状态管理库,由Vue核心团队维护,旨在替代vuex。pina的更多介绍,可从pina官网查看特点更简洁直接的API,提供组合式风格的API支持模块热更新和服务端渲染对TS支持更为友好安装npmipinia使用1.创建......
  • vue3 setup 父组件向子组件传递参数、方法|子组件向父组件传递数据,函数
    https://blog.csdn.net/qq_27517377/article/details/123163381https://blog.csdn.net/qq_27517377/article/details/123166367vue3setup父组件向子组件传递参数参数<template><el-rowclass="mb-4"> <el-buttontype="danger">props.vue传......
  • 手写类似于BetterScroll样式的左右联动菜单 uni-app+vue3+ts (使用了script setup语法
     注意:在模拟器用鼠标滚动是不会切换光标的,因为使用的是触摸滑动。【自定义类型贴在最后了】script部分如下:import{onMounted}from'vue'importtype{orderDetail}from'@/types/category'importtype{mainArr}from'@/types/main-arr'import{nextTick,ref}......