首页 > 其他分享 > vue3状态管理工具Pinia的使用

vue3状态管理工具Pinia的使用

时间:2023-07-27 15:36:31浏览次数:60  
标签:use Pinia app 管理工具 ts pinia vue3 import

1.安装   npm install pinia --save 

2.src文件夹下新建store文件夹,并新建index.ts

import {createPinia } from 'pinia'

const pinia = createPinia()

export default pinia

2.在main.ts中引入 pinia

import pinia from './store'

import {createApp} from 'vue'

const app = createApp()

app.use(router)

app.use(pinia)

app.mount('#app')

 

标签:use,Pinia,app,管理工具,ts,pinia,vue3,import
From: https://www.cnblogs.com/bamboopanders/p/17585083.html

相关文章

  • vue3中的watch与vue2中的watch的对比
    新版的 watch 和旧版对比,在使用方式上变化非常大!旧版是这样用的,和 data 、 methods 都在同级配置://旧版的写法:exportdefault{watch:{//...},data(){return{//...}},methods:{//...}} 新版的 watch......
  • 免费的敏捷开发需求管理工具
    传统的瀑布工作模式使用详细的需求说明书来表达需求,需求人员负责做需求调研,根据调研情况编制详细的需求说明书,进行需求评审,评审之后签字确认交给研发团队设计开发。在这样的环境下,需求文档是信息传递的主体,也是一份契约。然而详细的需求说明书有以下5大弊端:单向的信息传递,容易出现......
  • 免费的敏捷需求管理工具,需求管理方案
    ​传统的瀑布工作模式使用详细的需求说明书来表达需求,需求人员负责做需求调研,根据调研情况编制详细的需求说明书,进行需求评审,评审之后签字确认交给研发团队设计开发。在这样的环境下,需求文档是信息传递的主体,也是一份契约。然而详细的需求说明书有以下5大弊端:单向的信息传递,容......
  • 新一代包管理工具 pnpm 使用心得
    最近将几个项目的包管理器都由npm切换为了pnpm,迁移体验非常棒,算得上是个人体验最好的一次工具迁移。以下是使用pnpm的直观感受:体验优良,依赖安装速度极快,占用磁盘空间小。上手简单,绝大部分npm/yarn项目可以低成本完成迁移,官方也有较详尽的中文文档。pnpm组织no......
  • Vue3 组件篇
    组件命名组件的命名一般分为两种在单文件组件中,推荐为子组件使用PascalCase的标签名,以此来和原生的HTML元素作区分。虽然原生HTML标签名是不区分大小写的,但Vue单文件组件是可以在编译中区分大小写的。我们也可以使用/>来关闭一个标签。使用kebab-case形式并显式地......
  • vue3之element-plus
    1.安装elementPlus和自动导入插件npmielementPlusnpminstall-Dunplugin-vue-componentsunplugin-auto-import2、配置自动按需导入//引入插件importAutoImportfrom'unplugin-auto-import/vite'importComponentsfrom'unplugin-vue-components/vite'import{......
  • 大规模敏捷框架管理工具(SAFe,SOS)
    ​什么是SAFe?SAFe(ScaledAgileFramework)是全球运用最广泛的大规模敏捷框架。SAFe融合了精益、敏捷和DevOps,它是一个知识库,囊括了大量已被证明的精益敏捷实践和能力。SAFe诞生于2011年,短短12时间,全球已经有超过120万SAFe认证专业人士,并且持续保持快速增长,得到了全球越来越多专人......
  • Vue3.0 页面跳转的几种方式
     首先引入import{useRouter}from"vue-router";使用router接收useRouterconstrouter=useRouter(); 1. router.push我们最常用的router.push方法会将新的路由添加到历史记录中,同时会导航到该路由页面,当用户点击浏览器后退按钮时,则回到之前的URL。//保留......
  • Vue3组件二次封装
    naive-ui的n-input举例<template><n-inputclearableplaceholder=""v-bind="$attrs"><templatev-for="(value,name)in$slots"#[name]="slotData">......
  • 从vue2到vue3,自定义组件的v-model实现原理
    前言相信使用vue开发的同学应该都体会过v-model的便利,它可以非常方便地进行双向数据绑定,只要重新输入内容,视图就会立刻发生改变。本文将着重介绍如何在自定义组件当中使用v-model,以及在vue2和vue3中使用方式上的差异。概述v-model是一个语法糖,它在组件使用时相当于如下简写://......