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

一、存储数据

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

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

loveTalk.ts

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

二、读取数据

Count.vue

  import {useCountStore} from '../store/count'const countStore = useCountStore()// 以下两种方式都可以拿到state中的数据console.log('@@@',countStore.sum)console.log('@@@',countStore.$state.sum)

LoveTalk.vue

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

三、修改数据

以Count.vue为例
1、直接修改

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

2、批量修改

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

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

  // 方法function add(){// 第三种修改方式，pinia的actions配置项方式countStore.increment(n.value)}

count.ts中新增actions配置

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:'中国'}}
})