首页 > 其他分享 >vue3引入pinia

vue3引入pinia

时间:2023-12-06 11:24:17浏览次数:39  
标签:token1 token2 token export pinia vue3 引入 import

1、npm install pinia

2、在项目目录建store文件夹创index.js

import { createPinia,defineStore } from "pinia";
const pinia = createPinia()
pinia.state.value
const token = defineStore('token',{
state(){
return {
token: null
}
}
})
// ...可定义多个
export {token}
export default pinia

 3、其他页面使用存取

import {token} from "../store";
import {storeToRefs} from 'pinia'
let token1 = token();
let token2 = storeToRefs(token())
存token
token1.token = '123456'

取token

console.log(token2.token.value) // 123456


 

 

 



标签:token1,token2,token,export,pinia,vue3,引入,import
From: https://www.cnblogs.com/luckyShuang/p/17879084.html

相关文章

  • 基于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......
  • [转]vue3+tsx开发语法详解
    原文地址:vue3+tsx开发语法详解-知乎很多组件库都使用了TSX的方式开发,主要因为其灵活性比较高,TSX和SFC开发的优缺点就不介绍了,这里主要说一下将SFC项目改造为TSX的过程。安装JSX库pnpminstall@vitejs/plugin-vue-jsx-D安装完之后在vite.config.ts进行插件使用,代码如下......
  • 学习Vue3 第六章(认识Ref全家桶)
    ref接受一个内部值并返回一个响应式且可变的ref对象。ref对象仅有一个 .value property,指向该内部值<template><div><button@click="changeMsg">change</button><div>{{message}}</div></div></template><......
  • Vite4+Typescript+Vue3+Pinia 从零搭建(6) - 状态管理pina
    项目代码同步至码云weiz-vue3-templatepina是vue3官方推荐的状态管理库,由Vue核心团队维护,旨在替代vuex。pina的更多介绍,可从pina官网查看特点更简洁直接的API,提供组合式风格的API支持模块热更新和服务端渲染对TS支持更为友好安装npmipinia使用1.创建......
  • uniapp+vue3 优惠券样式
    效果如图:template部分:<viewclass="item"><viewclass="box"><viewclass="content"><viewclass="head">优惠券</view><viewclass="content-box1">......
  • Vue3 实现网页水印
    一些公司和组织出于系统文件或信息安全保密的需要,需要在系统网页上增加带有个人标识的水印。首先我们来看这样一个水印功能的实现思路,通常是在我们原有的网页上附上一个DIV层,将它设置绝对定位铺满整个窗口,然后z-index值尽量往大了设,保证让水印层处于当前网页所有元素的上面,又不......