首页 > 其他分享 >VUE3引入pinia配置使用

VUE3引入pinia配置使用

时间:2023-12-06 17:12:28浏览次数:31  
标签:const defineStore useArticleStore pinia VUE3 引入 Store

文档:https://pinia.vuejs.org/zh/introduction.html

1.引入pinna

npm install pinia -S

2.在src文件里面创建store文件article.js 在main.js中引用pinna

import { defineStore } from 'pinia'

// 你可以对 `defineStore()` 的返回值进行任意命名,但最好使用 store 的名字,同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`,`useCartStore`,`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useAlertsStore = defineStore('alerts', {
// 其他配置...
})

 获取多个接口

 使用pinia

import { useArticleStore } from "@/stores/article"; const articleOther = useArticleStore();

 

标签:const,defineStore,useArticleStore,pinia,VUE3,引入,Store
From: https://www.cnblogs.com/junwuxiao/p/17876915.html

相关文章

  • Vue3+Vite+ElementPlus管理系统常见问题
     本文本记录了使用Vue3+Vite+ElementPlus从0开始搭建一个前端工程会面临的常见问题,没有技术深度,但全都是解决实际问题的干货,可以当作是问题手册以备后用。本人日常工作偏后端开发,因此,文中的一些前端术语描述可能不严谨,敬请谅解。重点是:这里记录的解决方案都是行之有效果的,拿来......
  • Vue3+Vite+ElementPlus管理系统常见问题
    本文本记录了使用Vue3+Vite+ElementPlus从0开始搭建一个前端工程会面临的常见问题,没有技术深度,但全都是解决实际问题的干货,可以当作是问题手册以备后用。本人日常工作偏后端开发,因此,文中的一些前端术语描述可能不严谨,敬请谅解。重点是:这里记录的解决方案都是行之有效果的,拿来即......
  • vue3引入mitt(eventBus)
    版本"mitt":"^3.0.1"1、npminstallmitt2、项目下创建文件夹eventBus建myEventBus.jsimportmittfrom'mitt'exportdefaultmitt() 3、组件里监听组件AimportmyEventBusfrom"../eventBus/myEventBus";myEventBus.on('closeVisit�......
  • vue3 之 封装hooks
    注意:使用Hooks来做的话,需要封装一个以use开头的函数,自定义Hooks有一个潜规则,就是要use开头一、相关链接①已经封装好可直接使用的:https://vueuse.org/core/useMounted/② 为什么要在Vue3中多使用Hooks?好处是啥?: https://zhua......
  • vue3引入pinia
    1、npminstallpinia2、在项目目录建store文件夹创index.jsimport{createPinia,defineStore}from"pinia";constpinia=createPinia()pinia.state.valueconsttoken=defineStore('token',{state(){return{token:null}......
  • 基于Vue3.3 + TS4 ,让我们自主打造比肩 ElementPlus 的优质组件库的一些经验总结
    Vue.js作为一款流行的JavaScript框架,在前端开发中扮演着重要的角色。本文将分享在Vue3.3和TypeScript4的环境下,打造优质组件库的经验总结,并提供相关示例代码。一、创建项目并配置开发环境首先,我们需要创建一个新的Vue项目并配置好开发环境。具体步骤如下:使用VueCLI创建一个新的......
  • Vue3-Composition-API-学习笔记
    01.Setup函数的体验App.vue<template><div><h2>当前计数:{{counter}}</h2><button@click="increment">+1</button><button@click="decrement">-1</button></div></template&g......
  • Vue3的手脚架使用和组件父子间通信-插槽(Options API)学习笔记
    VueCLI安装和使用全局安装最新vue3npminstall@vue/cli-g升级VueCLI:如果是比较旧的版本,可以通过下面命令来升级npmupdate@vue/cli-g通过脚手架创建项目vuecreate01_product_demoVue3父子组件的通信父传子父组件<template><div><divclass="item"v-for="(item,in......
  • 记录--Vue使用CDN引入,响应式失效?
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助背景最近心血来潮,想要在本地开发时,也用CDN的方式引入Vue,想着既然通过CDN引入了,那么在项目中就没必要再importVue,然后把项目中引入Vue的地方都删掉,结果改完后,界面看似正常运行,但数据变更后,界面没有重新渲染。......
  • vue3使用虚拟化表格自定义表格并动态生成表头
    elementPlus的虚拟化表格用的是lang=tsx,先安装cnpmi@vitejs/plugin-vue-jsx然后去vite.config.ts里加配置importvueJsxfrom'@vitejs/plugin-vue-jsx'plugins:[vue(),vueJsx(),]再去tsconfig.json中加东西//不要把compilerOptio......