Vue3:使用Pinia存储、读取、修改数据

一、存储数据

Pinia插件中,存储数据的配置项是state
count.ts

javascript 复制代码
import {defineStore} from 'pinia'

export const useCountStore = defineStore('count',{
  // 真正存储数据的地方
  state(){
    return {
      sum:6
    }
  }
})

loveTalk.ts

javascript 复制代码
import {defineStore} from 'pinia'

export const useTalkStore = defineStore('talk',{
  // 真正存储数据的地方
  state(){
    return {
      talkList:[
        {id:'ftrfasdf01',title:'今天你有点怪,哪里怪?怪好看的!'},
        {id:'ftrfasdf02',title:'草莓、蓝莓、蔓越莓,今天想我了没?'},
        {id:'ftrfasdf03',title:'心里给你留了一块地,我的死心塌地'}
      ]
    }
  }
})

二、读取数据

Count.vue

javascript 复制代码
  import {useCountStore} from '../store/count'
  const countStore = useCountStore()

  // 以下两种方式都可以拿到state中的数据
  console.log('@@@',countStore.sum)
  console.log('@@@',countStore.$state.sum)

LoveTalk.vue

javascript 复制代码
  import {useTalkStore} from '../store/loveTalk'
  const talkStore = useTalkStore()
  
  // 以下两种方式都可以拿到state中的数据
  console.log('@@@',talkStore.talkList)
  console.log('@@@',talkStore.$state.talkList)

三、修改数据

Count.vue为例

1、直接修改

javascript 复制代码
  function add(){
      // 第一种修改方式
      countStore.sum += 1
  }

2、批量修改

javascript 复制代码
  function add(){
      // 第二种修改方式,批量修改多个数据
       countStore.$patch({
          sum:888,
          school:'前段-Vue3',
          address:'中国-北京'
      })
  }

3、通过Piniaactions配置项修改
Count.vue组件中的setup代码

javascript 复制代码
  // 方法
  function add(){
      // 第三种修改方式,pinia的actions配置项方式
      countStore.increment(n.value)
  }

count.ts中新增actions配置

javascript 复制代码
import {defineStore} from 'pinia'

export const useCountStore = defineStore('count',{
  // actions里面放置的是一个一个的方法,用于响应组件中的"动作"
  actions:{
    increment(value){
      console.log('increment被调用了',value)
      if( this.sum < 10){
        // 修改数据(this是当前的store)
        this.sum += value
      }
    }
  },
  // 真正存储数据的地方
  state(){
    return {
      sum:6,
      school:'Vue3',
      address:'中国'
    }
  }
})
相关推荐
sunn。36 分钟前
自定义组件触发饿了么表单校验
javascript·vue.js·elementui
Heidi__3 小时前
Vue 3 的响应式原理
前端·javascript·vue.js
Monly215 小时前
Vue:Table在点击删除的时候阻止行点击事件
前端·javascript·vue.js
工业互联网专业7 小时前
基于springboot+vue的二手车交易系统
java·vue.js·spring boot·毕业设计·源码·课程设计·二手车交易系统
前端小趴菜057 小时前
记录 vue-router访问 / 路径直接重定向到有权限的第一个菜单
前端·javascript·vue.js
Eva2156659 小时前
Flask+Vue构建图书管理系统及Echarts组件的使用
vue.js·flask·echarts
艾克马斯奎普特11 小时前
Vue.js 3 渐进式实现之响应式系统——第六节:嵌套的 effect 与 effect 栈
前端·vue.js
fayeyoko12 小时前
vue如何实现触摸板双指滑动(非长按滑动)
vue.js
醋醋12 小时前
vue2源码记录(2)
前端·vue.js
艾克马斯奎普特12 小时前
Vue.js 3 渐进式实现之响应式系统——第五节:分支切换与 cleanup
前端·vue.js