前言:此示例需要使用vuex,来存储获取参数,所以使用前请先安装插件(此方法适用需要修改参数较多时使用)

一、首先在static文件下创建“config.js”,这个文件打包后不会被编译,所以放在这里方便在服务器上准确找到对应文件修改参数,如图:

二、在main.js中配置configjs的链接

import axios from 'axios';

let myConfigPath = "/wechat/static/config.js"

if (process.env.NODE_ENV === "development") {

  myConfigPath = "../static/config.js"

}

axios.get(myConfigPath, { headers: { "Cache-Control": "no-cache" } }).then(response => {

  Vue.prototype.$myConfig = eval(response.data);

  Vue.prototype.$apiUrl = eval(response.data).apiUrl;

  /* eslint-disable no-new */

  new Vue({

    el: '#app',

    router,

    store,

    components: {

      App

    },

    template: '<App/>'

  })

})

三、如需要修改api的路径,则需在axios.js中配置相应参数

let baseURL;
function getApiUrl(){
  return new Promise((resolve, reject) => {
    if(baseURL){
      resolve(baseURL)
    }else{
     let myConfigPath = "/wechat/static/config.js"
      if (process.env.NODE_ENV === "development") {
        myConfigPath = "../../static/config.js"
      }
      let myConfig;
      axios.get(myConfigPath, { headers: { "Cache-Control": "no-cache" } }).then(response => {
        myConfig = eval(response.data);
        if(process.env.NODE_ENV === 'development'){      // 开发环境
          baseURL = '/api'
        }else{
          baseURL = myConfig.apiUrl;
        }
        resolve(baseURL)
      })
    }
 });
}

四、 在src文件夹下创建store文件,并在其中创建index.js文件,来引入vuex,并配置新增的user.js

 import Vue from 'vue'
 import Vuex from 'vuex'
 import user from './modules/user'
 Vue.use(Vuex)

 const store = new Vuex.Store({
   modules: {
     user
   }
 })

 export default store

五、在src的store文件下创建==>modules文件==>user.js,用于组件使用vuex取值使用

 六、配置完毕,需要在对应组件赋值/取值(不需要本地修改参数,可忽略此步骤)

如某组件中需要改变值,

 let menuArr = data.items;  

this.$store.commit('SET_questionnaireNumber', menuArr);  

取值时使用:this.$store.state.user.questionnaireNumber

七、如仅在服务器上修改参数,需要在用到参数的组件中做如下操作(代码与上面描述不符,仅供参考)

computed:如questionnaireNumber在服务器或本地修改后给及时更新questionnaireNumber的值

watch:意为computed改变时更新哪个方法,比如这里questionnaireNumber改变后我的请求接口的方法要改变,这里就加上this.function();去从新请求下方法以改变参数最新值

 

Logo

前往低代码交流专区

更多推荐