vue3的状态管理，pinia使用教程（二）组合式写法

前端小云儿

已于 2024-03-18 21:40:41 修改

阅读量589

点赞数 11

分类专栏： vue3知识点文章标签：前端 javascript vue.js

于 2024-02-14 23:00:28 首次发布

本文链接：https://blog.youkuaiyun.com/jieweiwujie/article/details/136117021

版权

vue3知识点专栏收录该内容

88 篇文章 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了Vue3中的Pinia状态管理库如何使用组合式API进行状态管理，包括新建仓库、在页面中应用以及高效地修改数据方法，如使用patch进行批量更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组合式写法

新建一个小仓库

//组合式写法
import {
  defineStore
} from "pinia";

import {
  ref,
  computed
} from "vue";
//第一个小仓库

let usetoolstore = defineStore('todo', () => {
  let todoArr = ref([{
    id: 1,
    title: "todo1"
  }, {
    id: 2,
    title: "todo2"
  }])
  let arr = ref([1, 2, 3, 4, 5])
  const total = computed(() => {
    return arr.value.reduce((prev, next) => {
      return prev + next
    }, 0)
  })
  return {
    todoArr,
    total,
    arr,
    updataFun(val) {
      todoArr.value.push({
        id: val,
        title: 'todo3'
      })
      arr.value.push(val)
    }
  }
})

export default usetoolstore

页面使用