当前位置：首页 > news >正文

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

news 2025/8/4 2:13:30

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

http://172.171.208.1:8003

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


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模块

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 模块：

<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.exea.download = "VideoWebPlugin.exe"; //a.style.display = "none"; // 障眼法藏起来a标签document.body.appendChild(a); // 将a标签追加到文档对象中a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了a.remove(); // 一次性的，用完就删除a标签},},
};
</script>