首页 > 其他分享 >vue3 在setup 外部调用 useStore() 为 undefined 解决

vue3 在setup 外部调用 useStore() 为 undefined 解决

时间:2022-08-24 10:25:06浏览次数:76  
标签:console undefined setup ts vue3 import useStore store log

场景:

在router/index.ts中想要获取store

import { useStore } from '@/vuex';
const store = useStore()
console.log('app store',store) //undefined

 

在App.vue,或者pages下其他.vue的页面中都是能够获取store的

<script setup lang="ts">
import { useStore } from '@/vuex';
const store = useStore()
console.log('app store',store.state.count) //2233
</script>

发现了store在setup中内部与外部使用的不同

解决外部使用的方案

直接 如main.ts 一样引入store

import { store } from '../vuex'
console.log('router store',store.state.count); //2233

这样,在router/index.ts下获取到了store。

标签:console,undefined,setup,ts,vue3,import,useStore,store,log
From: https://www.cnblogs.com/wang715100018066/p/16618907.html

相关文章

  • vue3+ts使用bus事件总线
    1、在vue2中我是这样使用的//创建一个vueBus.jsimportBusfrom'vue';letinstall=function(Vue){Vue.prototype.$bus=newBus()}exportdefault{install};......
  • vue3 学习-初识体验-组件 component
    组件可以简单理解为"页面构成的一部分".组件化是Vue最为重要的设计理念之一吧.早期的前端页面基本上就拆分为一个个的html,css,js文件,然后不断"堆砌",一套js库......
  • VUE3.0+Antdv+Asp.net WebApi开发学生信息管理系统(四)
    在B/S系统开发中,前后端分离开发设计已成为一种标准,而VUE作为前端三大主流框架之一,越来越受到大家的青睐,Antdv是Antd在Vue中的实现。本系列文章主要通过Antdv和Asp.netWebA......
  • Vue3.2 setup语法糖中组件的 name 属性如何定义
    方案一:增加一个脚本标签<scriptlang="ts">exportdefault{name:'Layout'}</script>方案二:使用插件unplugin-vue-define-options 方案三:(推荐)使用插件vit......
  • Vue3插槽
    一、前言插槽其实就是子组件提供给父组件的占位符。子组件定义好插槽后,父组件可以替换插槽内容。子组件不提供插槽时,父组件填充失效父组件无填充时,会使用插槽默认内容......
  • vue3支付后不允许跳转回预付订单页
    场景:在电商项目中,订单页通常是用来展示给用户看的,当支付完成后,就不允许回退回来,防止二次支付以及商品信息错乱曾使用:router.push(`/member/pay?orderId=${res.data.resul......
  • vue3 单文件组件——父组件访问子组件的实例
    如果一个子组件使用的是选项式API 或没有使用 <scriptsetup>,被引用的组件实例和该子组件的 this 完全一致,这意味着父组件对子组件的每一个属性和方法都有完全的访问......
  • vue3源码学习
    建议先通过官方指南了解3.0都干了啥、解决了什么问题。然后才是阅读其源码(通过利器),进阶了解它是如何实现的。https://juejin.cn/post/6925668019884523534......
  • vue3新内置组件teleport传送门
    使用到的原因:在使用固定定位弹出弹出框的时候,突然遇到位置不正确,而且在有index高级别的情况下依旧位置出错表现如下:出现原因:我的代码出现的tf元素,导致定位祖先元素发......
  • Vue3中插槽(slot)用法汇总
    Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过,但是你是否了解它全部用法呢?本篇文章就为大家带来Vue3中插槽的全部用法来帮助大家查漏补缺。什么是插槽简单来说就是......