pinia 的使用（vue3）

若尘~望境

已于 2022-03-04 09:37:03 修改

阅读量1.9k

点赞数 4

分类专栏： Vite使用文章标签： javascript vue.js

于 2022-03-03 16:21:34 首次发布

本文链接：https://blog.csdn.net/chengtiandi/article/details/123257373

版权

本文介绍了在 Vue3 项目中如何使用 Pinia 进行状态管理。内容涵盖下载安装 Pinia，创建 store 文件，使用 state 和 getters，通过 storeToRefs 解构赋值，以及详细阐述了 actions 的应用方法。

摘要由CSDN通过智能技术生成

pinia 的使用

下载引入 pinia

npm install pinia

// main.ts  (vue3  )

import {
    createPinia } from 'pinia';
app.use(createPinia());

创建 store>index.ts 文件

import {
    defineStore } from 'pinia'
// 主要的全局数据 main只是描述信息
export const useMainStore = defineStore('main', {
   
  // 静态数据
  state: () => {
   
    return {
   
      info: "pinia 可以使用",
      count: 10,
    }
  },
  // 相当于计算属性(有数据缓存)
  getters: {
   
    count10(state) {
   
      return state.count + 10
    },
    // 若使用this.count，则必须指明返回数据的类型
    count11(): number {