Vue3 Pinia如何修改全局状态变量值

 更新时间:2024年05月08日 09:28:42   作者:NorthCastle  
这篇文章主要介绍了Vue3 Pinia如何修改全局状态变量值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

说明

修改全局状态变量的值,是一个比较常规而且常见的操作。

本文就介绍四种常见的操作。

由于Option StoreSetup Store 在修改的时候略有不同,所以本文也会将不同点体现一下。

全局状态变量的定义

包含了 Option StoreSetup Store 两种定义方式;

在下面的修改操作中会根据这两种不同的定义来分别阐述。

// 导入 defineStore API
import { defineStore } from 'pinia'

// 导入 reactive 依赖
import { reactive } from 'vue'

// 定义全局状态方式一 : option store
export const useClassStore = defineStore('classinfo',{

    state: () => ({
        name:'快乐篮球二班',
        studentNum:30
    }),

    actions:{
      // 用来更新状态的值
      updateName(){
        this.name = '使用actions修改的name'
      }
    }


})

// 定义全局状态方式二 : setup store
export const useStudentStore = defineStore('studentinfo',() => {

    // 响应式状态
    const student =  reactive({
        name : '小明',
        age:12,
        className:'快乐足球一班'
    })


    // 直接定义一个方法进行数据属性的修改
    const updateName = (nameP:string)=>{
        student.name = nameP
    }


    return { student,updateName }

})

方式一:直接修改

直接修改 : 就是直接读取对象进行变量值的替换。

Option Store

	// 导入全局状态变量的定义
    import  { useClassStore }  from './storea'

    // 获取全局状态变量的对象
    const classStore = useClassStore()

    // 方式一 : 直接修改
   classStore.studentNum = 36

Setup Store

	// 导入全局状态变量的定义
    import  { useStudentStore }  from './storea'

    // 获取全局状态变量的对象
    const studentStore = useStudentStore()
    
    // 方式一 : 直接修改
    studentStore.student.className = '我也不知道是哪个班的'

方式二:$patch 方式修改

参数是一个对象的形式

Option Store

直接放入 【参数对象】 : {key:value} 就OK了

	// 导入全局状态变量的定义
    import  { useClassStore }  from './storea'

    // 获取全局状态变量的对象
    const classStore = useClassStore()
    
  	// 方式二 : $patch 方法修改
    classStore.$patch({studentNum:20})

Setup Store

由于 状态变量在定义的时候,就是一个响应式对象,所以需要把整个的对象都放进去才OK。

	// 导入全局状态变量的定义
    import  { useStudentStore }  from './storea'

    // 获取全局状态变量的对象
    const studentStore = useStudentStore()
    
    // 方式二 : $patch 方法修改
    studentStore.$patch({student:{
            name: studentStore.student.name,
            age: studentStore.student.age,
            className:'又换了一个班级'
    }})

方式三:$patch 带参数的方式修改

参数是 函数的形式,且函数的参数就是 原state对象

这种方式用起来比【方式二】要更加灵活。

Option Store

	// 导入全局状态变量的定义
    import  { useClassStore }  from './storea'

    // 获取全局状态变量的对象
    const classStore = useClassStore()
    
   // 方式三 :$patch + 函数参数的方法修改 : 函数的参数就是 状态对象
   classStore.$patch((state)=>{
           console.log(state)
           state.studentNum = 100
   })

Setup Store

	// 导入全局状态变量的定义
    import  { useStudentStore }  from './storea'

    // 获取全局状态变量的对象
    const studentStore = useStudentStore()
    
    // 方式三 :$patch + 函数参数的方法修改 : 函数的参数就是 状态对象
    studentStore.$patch((state)=>{
         console.log(state)
         state.student.className = '超级无敌快乐踢足球的班'
    })

方式四:actions方法的方式进行修改

这种方式比较好理解,就是通过调用已经定义好的方法的方式来进行变量值的修改。

也比较推荐使用这一种方式。

Option Store

	// 导入全局状态变量的定义
    import  { useClassStore }  from './storea'

    // 获取全局状态变量的对象
    const classStore = useClassStore()

 	// 方式四 :actions 方法的方式进行数据的修改
    classStore.updateName()

Setup Store

	// 导入全局状态变量的定义
    import  { useStudentStore }  from './storea'

    // 获取全局状态变量的对象
    const studentStore = useStudentStore()

    // 方式四 :actions 方法的方式进行数据的修改
    studentStore.updateName('小红')

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • vue实现弹幕功能

    vue实现弹幕功能

    这篇文章主要介绍了vue实现弹幕功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10
  • vue中$set用法详解

    vue中$set用法详解

    在vue中,并不是任何时候数据都是双向绑定的,解决数据没有被双向绑定我们可以使用 vm.$set 实例方法,该方法是全局方法 Vue.set 的一个别名,这篇文章主要介绍了vue中$set用法详细讲解,需要的朋友可以参考下
    2022-12-12
  • vue关于select组件绑定的值为数字类型的问题

    vue关于select组件绑定的值为数字类型的问题

    这篇文章主要介绍了vue关于select组件绑定的值为数字类型的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue实现经典选项卡功能

    vue实现经典选项卡功能

    这篇文章主要为大家详细介绍了vue实现经典选项卡功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 搭建element-ui的Vue前端工程操作实例

    搭建element-ui的Vue前端工程操作实例

    下面小编就为大家分享一篇搭建element-ui的Vue前端工程操作实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 使用konva和vue-konva库实现拖拽滑块验证功能

    使用konva和vue-konva库实现拖拽滑块验证功能

    这篇文章主要介绍了使用konva和vue-konva完成前端拖拽滑块验证功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • Vue-element中el-input输入卡顿问题的解决

    Vue-element中el-input输入卡顿问题的解决

    这篇文章主要介绍了Vue-element中el-input输入卡顿问题的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Vue实现todolist删除功能

    Vue实现todolist删除功能

    这篇文章主要介绍了Vue实现todolist删除功能,,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • vue2中filter()的实现代码

    vue2中filter()的实现代码

    vue2.0里,不再有自带的过滤器,需要自己定义过滤器。下面通过实例代码给大家介绍vue2中filter()的相关知识,感兴趣的朋友一起看看吧
    2017-07-07
  • vue+element搭建后台小总结 el-dropdown下拉功能

    vue+element搭建后台小总结 el-dropdown下拉功能

    这篇文章主要为大家详细介绍了vue+element搭建后台小总结,el-dropdown下拉功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09

最新评论