精华内容
下载资源
问答
  • 意思是说,用一个模块(js or vue)管理这套全局变量,模块里的变量用export (最好导出的格式为对象,方便在其他地方调用)暴露出去,当其它地方需要使用时,用import 导入该模块 全局变量专用模块Global.vue ...
  • 局组件和局部组件 1.先定义组件 Vue.component(‘组件名’, { 组件模板对象 }) 注意: 组件名不要使用原生的标签名, 若组件名定义时用的是驼峰命名法, 则调用时用中划线分割后小写 ...全局组件案例
  • 最近在学习VUE.js 中间涉及到JS全局变量,与其说是VUE全局变量,不如说是模块化JS开发的全局变量。 1、全局变量专用模块 就是以一个特定模块来组织管理这些全局量,需要引用的地方导入该模块便好。 全局变量专用...
  • 下面小编就为大家分享一篇在vue里面设置全局变量或数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vue全局变量的定义和使用,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue全局变量

    2018-09-12 18:10:46
    vue全局变量 vue全局变量 文件路径 config.js 设置变/常量 main.js 声明引用 使用 文件路径 src | |__config.js |__main.js |__home.vue config.js 设置变/常量 exports.install = function ...

    vue全局变量



    文件路径

    src
    |
    |__config.js
    |__main.js
    |__home.vue

    config.js 设置变/常量

    exports.install = function (Vue, options) {
        // 测试常量    
        Vue.prototype.TEST = 3;
    }

    main.js 声明引用

    // 引用
    import Config from './config'
    // 声明
    Vue.use(Config)

    使用

    console.log(this.TEST);
    展开全文
  • vue全局变量即时刷新

    千次阅读 2019-08-20 10:08:00
    起初用Vue.prototype.xxx 方式使用全局变量,但是当遇到页面之间跳出又跳转回来,全局变量存在不及时刷新问题!!! 解决: 采用vuex设置全局变量 新建store/index.js目录 index.js内容 import Vue from '...

    问题:

    起初用Vue.prototype.xxx 方式使用全局变量,但是当遇到页面之间跳出又跳转回来,全局变量存在不及时刷新问题!!!

    解决:

    采用vuex设置全局变量

    新建store/index.js目录

    index.js内容 

    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
        state: {
            /**
             * 是否需要强制登录
             */
            forcedLogin: false,
            hasLogin: false,
            userName: "",
    		totalPrice:0,
    		tagList:[]
        },
        mutations: {
    		update(state,[key,value]){
    			state[key]=value;
    		},
        }
    })
    
    export default store
    

    main.js内容

    import Vue from 'vue'
    import App from './App'
    
    import store from './store'
    
    Vue.config.productionTip = false
    
    Vue.prototype.$store = store
    
    
    App.mpType = 'app'
    
    const app = new Vue({
        store,
        ...App
    })
    app.$mount()
    

    vue页面中取值

    computed:{
    			getTotalPrice(){
    				return this.$store.state.totalPrice
    			},
    			getTagList(){
    				return this.$store.state.tagList
    			}
    		},

     

     

    <input class="uni-input" name="totalPrice" type="number" disabled="disabled" v-model="getTotalPrice" />

    vue页面中赋值

    const _this = this;
    _this.$store.commit('update',['totalPrice',500]);

     

    展开全文
  • electron-vue全局变量

    2021-04-16 15:11:07
    在electron-vue里,vuex的结构跟平时的不一样,这个叫vuex-electron的东西实属恶心到我了。 目录结构 平时的vue项目的store: const store = new Vuex.Store({ state: {}, getters: {}, mutations: {}, actions:...

    在electron-vue里,vuex的结构跟平时的不一样,这个叫vuex-electron的东西实属恶心到我了。
    由于electron-vue里面全局变量引用方式和修改方式不一样,网上能查到的方法也不是很多,这里就写能使用和修改全局变量的方法

    差别

    平时的vue项目的store:

    const store = new Vuex.Store({
      state: {},
      getters: {},
      mutations: {},
      actions: {}
    })
    

    但是 vuex-electron 里面的却是:

    ...
    export default new Vuex.Store({
      modules,
      plugins: [
        createPersistedState(),
        // createSharedMutations(), // 多进程间共享 Vuex Store 的状态的插件,这个注释掉
      ],
      strict: process.env.NODE_ENV !== 'production',
    })
    

    目录结构

    它们的参数都是不一样的,如果要添加全局变量就要在

    ./store/modules

    文件夹里面放你全局变量的文件

    // 目录结构
    ↓ renderer
    	→ assets
    	→ router
    	↓ store
      		↓ modules
        		Counter.js // 就是在这个里面加
        		index.js
      		index.js
    ...
    

    全局变量要在这里写

    // ./store/modules/Counter
    const state = { // 全局变量要在这里写
      main: 0,
      stretch: true,
    }
    const mutations = { //......
    

    全局变量的使用

    引用全局变量

    // 随便一个页面下
    // this.$store + 一样的state名称 + 文件名 + 参数名
    mounted() {
    	console.log(this.$store.state.Counter.stretch) // true
    }
    

    修改全局变量

    但是发现,直接修改值是会报错的

    this.$store.state.Counter.stretch = true // 疯狂报错
    //[Vue warn]: Error in callback for watcher "function () { return 
    // this._data.$$state }": "Error: [vuex] do not mutate vuex store 
    // state outside mutation handlers."
    

    很恶心,不过能用 commit 函数进行修改这些值

    注意,如果上面 createSharedMutations() 方法没有注释掉,commit 是会报错的

    可以在全局变量下面的 mutations 里面添加函数,用来修改全局变量

    注意,函数参数第一个需要带 state ,代表上面的全局参数,不然修改不了的

    // ./store/modules/Counter
    const state = {
      main: 0,
      stretch: true,
    }
    
    const mutations = {
      turnStretch(state, str) {
        // 这个state是传上面的全局参数(必须的,不然修改不了全局参数)
        state.stretch = false // 修改state里面的值
        state.main = str
        console.log('state.stretch:', state.stretch)
        console.log('state.main:', state.main)
      },
      otherFun(state) { // 都需要带state
      }
    }
    

    commit 调用方法

    // 随便一个页面
    mounted() {
    	this.$store.commit('turnStretch', '顶你个肺') // 函数名,参数
    	console.log(
          this.$store.state.Counter.stretch,
          this.$store.state.Counter.main
        )
    }
    // state.stretch: false                       Counter.js?8882:17 
    // state.main: 顶你个肺                       Counter.js?8882:17 
    // false "abcdefg"                    settingContent.vue?34ed:47 
    // 这里发现能修改,并且能读取
    

    但是连续携带多个参数并不可行

    // 一个随便页面
    this.$store.commit('changeSysSet', 'windowOnTop', true)
    
    // 全局变量下的函数
      changeSysSet(state, name, str) {
        console.log('name, str:', name, str)
        // 输出 name, str: windowOnTop undefined
      },
    

    用对象的方式传参

    // 还是这个随便页面
    this.$store.commit('changeSysSet', { name: 'windowOnTop', value: true })
    // 全局变量下的函数
      changeSysSet(state, data) {
        console.log('data:', data.name, data.value)
        // 输出 data: windowOnTop true
      },
    

    vuex-electron用法跟平时的vue项目不一样,是不是很恶心

    console.log(’********’) // 破口大骂

    展开全文
  • vue全局变量存储的几种方式

    千次阅读 2019-10-31 14:19:42
    1、全局变量专用模块(vue调用时要导入,不用this) 1:新建一个global.js,声明变量,采用export将其暴露出来。如 const mobileReg = /(^1[0|1|2|3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/ //手机号,11位纯数字 ...

    只可读的

    1、全局变量专用模块(vue调用时要导入,不用this)

    1:新建一个global.js,声明变量,采用export将其暴露出来。如

    const mobileReg = /(^1[0|1|2|3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/ //手机号,11位纯数字
    const passwordReg = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,15}$/ //密码,6-15位英文数字组合
    const chineseReg = /[u4e00-u9fa5]/ //中文
    const digitalReg = /^\d+(\.{1}\d+)?$/ //数字
    const hostReg = /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62}|(:[0-9]{1,4}))+\.?/ //域名
    const nickReg = /^[A-Za-z\d\u2E80-\u9FFF【】\[\]\(\)\-\,\,\?\?\.\。\;\:\:\;\\\、\“\”\‘\']+$/ //昵称,只能是中文/数字/英文字母 以及特殊符号
    const accountReg = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{5,20}$/ //账号,5-20位英文数字组合
    const emailReg = /^([a-zA-Z0-9_])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/ //邮箱
    function getRandColor () {
      var tem = Math.round(Math.random() * colorListLength)
      return colorList[tem]
    }
    
    export { mobileReg, passwordReg, chineseReg, digitalReg, hostReg, nickReg, accountReg, emailReg ,getRandColor }
    

    调用~~.vue

     import { mobileReg } from "@/utils/global";
    
     if (!mobileReg.test(this.form.mobile)) {
    
         this.$toast("请输入正确的手机号");
    
         return false;
    
      }

    2、全局变量模块挂载到Vue.prototype里。(调用不需要导入,要用this)

     

    main.js
    
    import {loginBaseURL} from './utils/config'
    
    Vue.prototype.$baseImageUrl = baseImageUrl
    
    Vue.prototype.$appName = 'My App'
    
    
    ---.vue
    this.$baseImageUrl.value
    
    this.$appName

    可读改的

    1:在main.js的data中设置

    main.js定义
    
    new Vue({
        router,
        data: function(){
            return {
                ORDERID: 'PLDxxxxxx0001',
            }
        },
        render: h => h(App)
    }).$mount('#app');
    
    
    
    某个vue页面
    
    // 修改
    this.$root.ORDERID = "xxxxx"
    // 引用
    let orderId = this.$root.ORDERID 

    2:Cookie的使用(js-cookie插件)

    一、安装
    npm install js-cookie --save
    
    二、引用
    import Cookies from 'js-cookie'
    
    三、一般使用
    存到Cookie去
    1.Cookies.set('name', 'value');  
    Cookies.set('name', 'value', { expires: 7 });  
    Cookies.set('name', 'value', { expires: 7, path: '' });  
    
    2.在Cookie中取出
    Cookies.get('name'); 
    
    3.删除
    Cookies.remove('name');  
       
    

    3:vuex(状态管理模式,data共享)

                                             -------------------------------------------------------》看下篇

     

     

     

    展开全文
  • vue全局变量的 定义与任意调用 在main.js文件中定义全局变量的代码,举例示下:
  • 本文主要跟大家介绍了关于Vue定义全局变量与常量的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 我想要定义一个变量, 在项目的任何地方都可以访问到, 不需要每一次使用的时候, 都引入...
  • Vuex 并不限制你代码结构。但是, 它规定一些需要遵守的规则 应用层级的状态,应该集中到单个...储存在Vuex中的数据和Vue实例的数据遵循相同的规则,例如对象必须是纯粹的 Vue组件获取store实例中的值 // 创建一个 Co
  • 我添加了两个全局变量 access_token:"",  refresh_token:"", set方法是在组件中修改全局变量时需要的 , 然后在vue项目的main.js中导入defined.js文件 然后将对象添加到vue原型链上,...
  • 页面刷新后vue全局变量数据丢失 在开发中,我们需要将一些数据存到全局变量中,如用户的用户名等,便于页面展示,保存从服务器发送请求返回的数据,以避免在不同组件发送相同请求时,重复请求服务器。 方法一:...
  • 全局组件和局部组件 * 1.先定义组件 Vue.component('组件名', { 组件模板对象 }) * 注意: 组件名不要使用原生的标签名, 若组件名定义时用的是驼峰命名法, 则调用时用中划线分割后小写 * 例如: 组件-->m...
  • vue项目中配置全局动态变量的方式:sessionStorage,vuex多个组件都会用到的公共的状态和方法(复用):vue 全局混入vue项目中配置全局静态变量的方式:vue 的原型链; global 的全局(数据会暴露在window上,而且...
  • vue全局变量的几种实现方式

    千次阅读 2018-07-11 14:48:39
    1.设置一个全局变量专用的js。Global.js 然后在要用的组件里引用该文件。     2.这种方式也要有一个上面的Global.js,使用方式有所区别。 将Global.js引入到程序的入口文件main.js里,如下 需要使用...
  • 今天小编就为大家分享一篇在vue中多次调用同一个定义全局变量的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue全局变量和方法的使用

    千次阅读 2020-10-26 15:55:33
    1、创建文件来存放Vue全局变量和全局方法-common.vue <script> const userName = 'pshdhx' function add(x,y){ return x+y } export default{ userName, add, } </script> 2、引入common....
  • 最近在学习VUE.js 中间涉及到JS全局变量,与其说是VUE全局变量,不如说是模块化JS开发的全局变量。1、全局变量专用模块就是以一个特定模块来组织管理这些全局量,需要引用的地方导入该模块便好。全局变量专用模块 ...
  • Vue 全局变量,局部变量

    千次阅读 2019-04-18 23:09:28
    全局组件和局部组件 1.先定义组件 Vue.component(‘组件名’, { 组件模板对象 }) 注意: 组件名不要使用原生的标签名, 若组件名定义时用的是驼峰命名法, 则调用时用中划线分割后小写 例如: 组件-->mtText ...
  • vue全局变量和Vue.prototype

    千次阅读 2019-05-29 16:14:39
    一、使用Vue.prototype实现全局变量 对于一个vue脚手架项目来说,在main.js里使用Vue.prototype声明的变量,实际上是为Vue对象添加了一个原型属性,而不是一个全局变量。但是如果这个原型属性的值是引用类型的,我们...
  • https://blog.csdn.net/qq_30669833/article/details/81706217
  • //将vue当前的this再次赋值,在下面才能继续调用(注意,必须在function之外进行) //第二种方法 window.aa = this.aa //这种方式赋值后,在function中调用直接写为“ aa ” function boundary() { // this....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 44,954
精华内容 17,981
关键字:

vue全局变量

vue 订阅