pinia状态管理

最新推荐文章于 2025-06-15 19:00:28 发布

原创最新推荐文章于 2025-06-15 19:00:28 发布 · 292 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #npm #elementui

本文详细介绍了如何在 Vue 项目中安装和使用 Pinia 进行状态管理。从安装 Pinia 开始，接着在 App 中注册，然后创建名为 'count' 的 store，并定义 state、getters 和 actions。最后，在组件中通过 useCountStore 访问并使用状态，实现了点击按钮增加计数的功能。

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

第一步：安装pinia

npm install pinia --save-dev

第二步：在app中注册pinia

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'; 

const app = createApp(App);
app.use(createPinia());

app.mount('#app')

第三步：store/count.ts

import { defineStore } from 'pinia'
 export const useCountStore = defineStore('count',{
    state: ()=> ({
      num: 1
    }),
   getters:{
     double:function(state:any):any{
      return state.num *2
     },
   },
   actions:{
    increment(){
      this.num ++
    }
   }
 })

第四步：在组件中引用

<template>
  <div class="page-container">
    <div class="footer-container">
      <h1>{{countStore.num}}</h1>
      <div @click="countStore.increment">加1</div>
    </div>
  </div>
</template>

<script>
  import { useCountStore } from './store/count'
  export default{
    setup(){
      const countStore = useCountStore();
      console.log(countStore);
      return {
        countStore
      };
    }
  }