vuex中如何获取vue的this

最新推荐文章于 2024-09-06 18:19:45 发布

大德大威顾神

最新推荐文章于 2024-09-06 18:19:45 发布

阅读量5.3k

点赞数 8

分类专栏： vue JavaScript 前端

本文链接：https://blog.csdn.net/q759859479/article/details/107668153

版权

前端同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

JavaScript

10 篇文章 0 订阅

订阅专栏

vue

5 篇文章 0 订阅

订阅专栏

vuex中如何获取vue的this？

考虑如下场景：

使用vue和elememt-ui开发，在vuex中调用某个接口，根据接口返回想要使用element-ui的弹窗组件提示请求信息

但是vuex中没有this，该如何调用比如：this.$message.error('xxx失败');

方案

比如在login登录文件中：

export default {
  data () {
    return {

    };
  },
  methods: {
    
    xxx() {


       xxx.login({
          name: 'xxx',
          pwd    : 'xxx'
        }).then(({ data: { data } }) => {
          this.$store.dispatch('xxx', {
            form: data.form,
            _this: this //在此处传入该组件的this，vuex中即可获取this
          });
      })
    }

  }
}

在vuex中：

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);


export default new Vuex.Store( {

    state: {},
    
    mutations: {},
        
    actions: {},

    xxx({ commit }, Data) {
      let { _this } = Data;
      _this.$message.error('xxx失败');
    }

})