解决Vue+ts里面this.$store问题

目录
  • Vue+ts里this.$store问题
    • 解决办法
  • Vue实践ts中的一些常见错误及解决
    • mixin报错
    • 扩展属性报错
    • TS中没有import和export的TS文件变量被视为全局

Vue+ts里this.$store问题

vuex里面我调用this.$store访问仓库state时，调用失败报错

解决办法

(this as any).$store 

Vue实践ts中的一些常见错误及解决

mixin报错

import { Component, Prop, Vue ,Mixins} from 'vue-property-decorator'
import httpminix from '../mixin/httpMixin'
@Component({
  mixins:[httpminix]
})
export default class HelloWorld extends Vue {
  public async getUser() : Promise<void> {
    const r = await this.apiGet('/show') //HelloWorld上没有apiGet方法
    this.firstName = JSON.stringify(r.data)
  }
}

解决方案

import { Component, Prop, Vue ,Mixins} from 'vue-property-decorator'
import httpminix from '../mixin/httpMixin'
@Component
// 这里从继承Vue改成继承Minix函数，这样就有提示了
export default class HelloWorld extends Mixins(httpminix) {
  public async getUser() : Promise<void> {
    const r = await this.apiGet('/show')
    this.firstName = JSON.stringify(r.data)
  }
  public mounted() {
   this.getUser()
  }
}

扩展属性报错

我们现在代码里写一段window,然后用编辑器跳转到其.d.ts文件中去

// 定义一个全局变量 window 类型为Window
declare var window: Window;
// 截取Window接口
interface Window

由于这个接口为全局接口，所以我们可以声明一个同名全局全局接口，TS会帮我们合并

interface Window {
  // 也可以添加 
  // 字符串签名 可以允许添加未知名称属性
  [p: string]: any
}
// 这样就可以使用如下代码不报错
import axios from 'axios'
window.axios = axios

然后我们发现

window.axios //这里没有属性提示

然后我想把这个axios具体类型挂载上去,当然一想，像下面这样做

import {AxiosStatic} from 'axios'
interface Window {
  axios: AxiosStatic
}

然后发现报错了，window上没有axios这个属性，就很疑惑，尝试改回去，仍然报错

import {AxiosStatic} from 'axios'
interface Window {
  [p: string]: any
}

我就想这两个区别就是导入了一个类型，突然想到

TS中没有import和export的TS文件变量被视为全局

然后回去一看原本Window的定义

// 注意lib.dom.d.ts这里没有export
interface Window

好的，想通了，就是因为使用import导入了一个类型，导致我自定义Window接口变成了模块内的，这时候的解决方案当然是看看内置语法有没有能显示定义全局性的变量

// bingo  此时window.axios有提示啦
import { AxiosStatic } from "axios";
declare global {
  interface Window {
      axios: AxiosStatic
  }
}
export { };

TS为我们在模块定义全局提供了一个方式,用于解决在模块中扩展全局

declare global {
  // your type code
}

扩展Vue属性例子

import Vue from 'vue'
declare module "vue/types/vue" {
  interface Vue {
    $message: string;
  }
}

在组件类中可以这样访问

this.$messgae //这里有属性提示

总结：需要扩展一个第三方声明文件，需要确定其命名空间以及扩展变量实现的接口结构，然后复制该接口写一次自己的类型即可

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法

    1.在Vue项目中引用公共方法 作为一个新人小白,在使用vue的过程中,难免会遇到很多的问题,比如某个方法在很多组件中都能用的上,如果在每个组件上都去引用一次的话,会比较麻烦,增加代码量.怎么做比较好呢,话不多说直接看代码把 首先 要在main.js中引入公共js.然后,将方法赋在Vue的原型链上. 像图中这样. 然后在需要的组件上去引入这个方法 mouted (){ //调用方法 this.common.login(); } /**然后公共方法里写一段简单的代码*/ export defaul

  • VUEX采坑之路之获取不到$store的解决方法

    今天在写vuex的时候遇到了一个特别无语的问题,找了半个小时才找到这个问题,所以贴出来,大家在遇到和我一样的问题的时候不会太过慌张 在第一次写vuex的时候无论如何获取不到$store,后来找了好久才发现是我给全局VUE注入的时候注入的是Store而非store 这一个字母之差看上去可能没什么问题,可就是获取不到全局的$store; 代码奉上 // The Vue build version to load with the `import` command // (runtime-only o

  • 在Vue中使用this.$store或者是$route一直报错的解决

    今天在引入路由参数和状态组件的时候发现一直报空找不到,但是我在控制台查看还能找得到 一直超费解,直到我在其他组件单独测试的时候又可以了 这是测试正常的 test1s : function(){ debugger var test1=this.$route.params.num; console.log(test1); return test1; } getRequest: (val)=> {//改变海黄学堂状态 debugger let thisRoute=this.$store.state.s

  • 解决Vue+ts里面this.$store问题

    目录 Vue+ts里this.$store问题 解决办法 Vue实践ts中的一些常见错误及解决 mixin报错 扩展属性报错 TS中没有import和export的TS文件变量被视为全局 Vue+ts里this.$store问题 vuex里面我调用this.$store访问仓库state时,调用失败报错 解决办法 (this as any).$store  Vue实践ts中的一些常见错误及解决 mixin报错 import { Component, Prop, Vue ,Mixins} from

  • 解决vue刷新页面以后丢失store的数据问题

    刷新页面时vue实例重新加载,store就会被重置,可以把定义刷新前把store存入本地localStorage.sessionStorage.cookie中,localStorage是永久储存,重新打开页面时会读取上一次打开的页面数据,sessionStorage是储存到关闭为止,cookie不适合存大量数据.根据我的需求,最合适的是sessionStorage. beforeunload在页面刷新时触发,可以监听这个方法,让页面在刷新前存store到sessionStorage中. 当然,在

  • 使用Vuex解决Vue中的身份验证问题

    传统方式中,许多人使用本地存储,来管理通过客户端验证生成的tokens.一个大问题是如何有更好的方式,来管理验证tokens,从而允许我们来存储更大的用户信息. 这就是Vuex的作用. Vuex为Vue.js应用管理状态..对于应用中所有的组件来说,它被当做中央存储,并用规则确保状态只能以可预见的方式改变. 对于经常检查本地存储来说,听起来是个更好的选择?让我们一起来探索下吧. 建立应用模块 对于这个项目,我们想创建一个使用vuex和vue-router的vue应用.我们会使用vue cli 3

  • 解决Vue+Electron下Vuex的Dispatch没有效果问题

    解决Vue+Electron下Vuex的Dispatch没有效果问题

    这个问题是解决基于 vue 和 electron 的开发中使用 vuex 的 dispatch 无效的问题,即解决了 Please, don't use direct commit's, use dispatch instead of this. 问题. 先允许我梳理一下目录结构,以便阅读的时候不会一头雾水,你到底说的这个文件是哪个-- 其中 /src/main 是存放主配置文件的,/src/render 下面有 store.router.components 等. components 下面就

  • 解决vue打包后vendor.js文件过大问题

    第一步.cdn引入各种包 index.html中cdn的方式引入vue.vuex.axios.element-ui.vue-router等包,如下图: 第二步.在使用vue等包的地方,注释掉import引入 在所有使用vue的地方注释掉引入的vue等包,但是Vue.use(axios).Vue.use(VueRoter).Vue.use(vuex)等依然要使用,除了Vue.use(ElementUI), 如果加上这句话,还是会打包element-ui到vendor.js文件中 在main.js

  • 解决vue axios的封装 请求状态的错误提示问题

    如下所示: /** * axios配置,输出为vue组建 * */ import axios from 'axios'; import qs from 'qs' import CookiesJS from 'js-cookie' import router from '../router' // http request 拦截器 axios.interceptors.request.use( config => { config.headers = { 'Content-Type': 'appl

  • 解决vue组件中click事件失效的问题

    最近使用vue学习开发移动端的项目,使用了bette-scroll插件做滚动.在引入better-scroll的组件中使用@click事件的时候,点击事件失效,v-on:click.v-bind:click.@click.native都不行,试了一下@touchstart是却是可以的,发现better-scroll的配置中没有设置click:true,设置过之后click事件成功. 后来在使用vuex的时候一直报"[vuex] unknown mutation type: changeCity&

  • 解决vue项目F5刷新mounted里的函数不执行问题

    项目背景 在主文件index.vue中初始化页面相关的操作, 在mounted中放置用户权限判断并更新store中的权限值,当点击相应组件时mounted可正常工作, 但是在用户手动刷新时mounted内的函数并未执行,导致相应组件未获取到权限而显示异常 问题解决 首先,这跟vue生命周期有关,图就不贴了,直接说原因. 当用户f5刷新页面时,整个页面会重新去请求,js的状态变量消失,但是el节点并未重新建立. 因为,mounted是el被新创建的vm.$el替换,并挂载到实例上去之后调用的钩子,

  • 解决Vue 给mapState中定义的属性赋值报错的问题

    1. 实践环境 Vue 2.9.6 2. 问题描述 <script> import { mapState } from 'vuex'; export default { name: "displayCount", computed: { ...mapState({ ...略 count: state => state.a.count }) }, methods: { increaseCount () { this.count = this.count + 1 } }

  • 解决Vue 移动端点击出现300毫秒延迟的问题

    1. 安装模块 cnpm install fastclick -S 2. 在main.js中引入,并绑定到body import FastClick from 'fastclick' FastClick.attach(document.body); 当better-scroll和 fastclick冲突的不能点击的时候: <slider> <div v-for="item in recommends"> <a :href="item.linkUr

随机推荐