用Vuex存储可配置下载的ip地址(用XML进行ajax请求配置文件)

1.在public文件夹下创建一个名为Configuration的文件在创建一个Configuration.txt里面就放IP地址(这里的名字可以随便命名一定性的被人解读文件含义)

例如:

javascript 复制代码
http://172.171.208.1:8003

2.在store文件夹中创建一个名为 ajaxModule.js 的 Vuex 模块:

javascript 复制代码
const state = {
    changeIp: ''//参数
};
const mutations = {
    setChangeIp(state, ip) {
        state.changeIp = ip;
    }
};
const getters = {
    changeIp: state => state.changeIp,
};
const actions = {
    fetchChangeIp({ commit }) {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                var Changeid = this.responseText; 
                commit('setChangeIp', Changeid);
            }
        };
        xhttp.open("GET", "../../Configuration/Configuration.txt", true);
        xhttp.send();
    }
};
export default {
    namespaced: true,/// 添加这一行启用命名空间
    state,
    mutations,
    actions,
    getters
};

3.在您的store中index.js引入ajaxModule模块

javascript 复制代码
import Vue from 'vue'
import Vuex from 'vuex'
import ajaxModule from './ajaxModule';

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    ajax:ajaxModule//引入模块
  }
})

4.在全局页面中调用该 Vuex 模块:

javascript 复制代码
<template>
  <div>
    <p>Change IP: {{ changeIp }}</p>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex"; //引入vuex模块

export default {
  computed: {
    // 添加命名空间 'ajax' 到 mapGetters
    ...mapGetters("ajax", ["changeIp"]),
  },
  methods: {
    // 同样,添加命名空间 'ajax' 到 mapActions
    ...mapActions("ajax", ["fetchChangeIp"]),

    frontDownload() {
      var a = document.createElement("a"); // 创建一个<a></a>标签
      var peizhiurl = this.changeIp; //获取到配置文件的ip地址
      a.href = peizhiurl + "/ViebPlugin.exe"; //拼接起来就可以了http://172.17.208.1:8003/ViebPlugin.exe
      a.download = "VideoWebPlugin.exe"; //
      a.style.display = "none"; // 障眼法藏起来a标签
      document.body.appendChild(a); // 将a标签追加到文档对象中
      a.click(); // 模拟点击了a标签,会触发a标签的href的读取,浏览器就会自动下载了
      a.remove(); // 一次性的,用完就删除a标签
    },
  },
};
</script>
相关推荐
两个西柚呀12 小时前
未在props中声明的属性
前端·javascript·vue.js
一个处女座的程序猿O(∩_∩)O16 小时前
Vue-Loader 深度解析:原理、使用与最佳实践
前端·javascript·vue.js
麦麦大数据18 小时前
F034 vue+neo4j 体育知识图谱系统|体育文献知识图谱vue+flask知识图谱管理+d3.js可视化
javascript·vue.js·知识图谱·neo4j·文献·体育·知识图谱管理
fhsWar20 小时前
Vue3 props: `required: true` 与 vant 的`makeRequiredProp`
前端·javascript·vue.js
阿珊和她的猫1 天前
深入剖析 Vue Router History 路由刷新页面 404 问题:原因与解决之道
前端·javascript·vue.js
麦麦大数据2 天前
F032 材料科学文献知识图谱可视化分析系统(四种知识图谱可视化布局) | vue + flask + echarts + d3.js 实现
vue.js·flask·知识图谱·数据可视化·论文文献·1024程序员节·科研图谱
web打印社区2 天前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
小光学长2 天前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
麦麦大数据2 天前
F033 vue+neo4j图书智能问答+知识图谱推荐系统 |知识图谱+neo4j+vue+flask+mysql实现代码
vue.js·flask·nlp·neo4j·智能问答·图书·1024程序员节
橙子199110162 天前
在 Kotlin 中,ViewModel 的获取
开发语言·vue.js·kotlin