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

生产队队长2024-04-03 22:01

一、存储数据

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、通过Pinia的actions配置项修改
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:'中国'
    }
  }
})