pinia的使用

最新推荐文章于 2025-05-20 11:49:33 发布

小钱要努力

最新推荐文章于 2025-05-20 11:49:33 发布

阅读量1.8k

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_43699122/article/details/128066867

版权

本文详细介绍了如何在Vue项目中使用Pinia进行状态管理。从安装Pinia开始，通过创建store并定义state、getters、actions，然后展示了如何在组件中使用store数据和方法。最后，讨论了如何利用pinia-plugin-persistedstate实现状态的持久化存储，确保数据在刷新后仍然保留。

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

1.安装安装pinia

pinia

1.1 安装命令

npm install pinia
# 或者使用 yarn
yarn add pinia
# 或者使用 cnpm
cnpm install pinia

1.2 代码如下:

// main.js

import {
    createApp } from "vue";
import App from "./App.vue";
import {
    createPinia } from "pinia";
const pinia = createPinia();

const app = createApp(App);
app.use(pinia);
app.mount("#app");

2.创建store

2.1 代码如下:

/src/store/index.js

import {
    defineStore } from 'pinia'

//参数是 store 的唯一 id
export const useStore = defineStore('main', {
   
  state: () => {
   
    return {
   
      count: 0,
      name: "张三"
    }
  }
})

2.2.使用store

/src/App.vue

<template>
  <div>
    {
   {
    count }}
    <br />
    <button type="primary" @click="changeNum()"> + </button>
    <br />
    {
   {
    name }}
    <br />
    <n-button type="primary" @click="changeName()"> 改名 </button>
    <br />
    <nbutton type="primary" @click="patchStore()"> 批量修改 </button>
  </div>
</template>

<script setup lang="ts">
import {
    useStore } from "../stores/index";