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:'中国'
    }
  }
})
相关推荐
一城烟雨_6 小时前
vue3 实现将html内容导出为图片、pdf和word
前端·javascript·vue.js·pdf
涵信8 小时前
第九节:性能优化高频题-首屏加载优化策略
前端·vue.js·性能优化
涵信9 小时前
第十一节:性能优化高频题-响应式数据深度监听问题
javascript·vue.js·性能优化
Mr.app11 小时前
vue mixin混入与hook
vue.js
一个专注写代码的程序媛12 小时前
vue组件间通信
前端·javascript·vue.js
一笑code12 小时前
美团社招一面
前端·javascript·vue.js
心宽体胖连壮实12 小时前
记录一次 MarchingSquaresJS 使用经历
vue.js
Monly2113 小时前
vue报错:Loading chunk * failed,vue-router懒加载出错问题。
前端·javascript·vue.js
薛定谔的猫214 小时前
Composition API的深入理解与最佳实践
前端·vue.js
parade岁月14 小时前
TypeScript 全局类型声明文件规范性分析与归纳
前端·vue.js·typescript