vue3项目中pinia的用法详解（值得收藏）

最新推荐文章于 2025-03-18 10:43:15 发布

weixin_47389477

最新推荐文章于 2025-03-18 10:43:15 发布

阅读量282

点赞数 3

分类专栏：前端高级功能文章标签：前端 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_47389477/article/details/140524175

版权

前端高级功能专栏收录该内容

20 篇文章

订阅专栏

搭建pinia环境

第一步：npm install pinia

第二步：操作src/main.js

import { createApp } from 'vue'
import App from './App.vue'

/* 引入createPinia，用于创建pinia */
import { createPinia } from 'pinia'
const pinia = createPinia()
const app = createApp(App)

/* 使用插件 */{}
app.use(pinia)
app.mount('#app')

存储和读取数据

第三步：操作src/store/count.js

import {defineStore} from 'pinia'

// 定义并暴露一个store
export const useCountStore = defineStore('count',{
 
  // 状态
  state(){
    return {
      sum:6
    }
  },
  // 计算
  getters:{},
   // 动作
  actions:{
  setSum(num){
  	this.state.sum+=num
  }
  }
})

组件中使用state数据

<template>
  <h2>当前求和为：{{ sumStore.sum }}</h2>
</template>

<script setup name="Count">
  // 引入对应的useXxxxxStore	
  import {useCountStore} from '@/store/count'
  
  // 调用useXxxxxStore得到对应的store
  const sumStore = useCountStore()
</script>

修改数据的三种方式

第一种修改

sumStore.sum=8

第二种修改

sumStore.$patch({
sum:9
})

第三种修改，借助action修改（action中可以编写一些业务逻辑）

// 使用countStore
import {useCountStore} from ‘@/store/count’
const sumStore = useCountStore()
// 调用对应action, setSum方法在上面 src/store/count.js 有写
sumStore .setSum(10)