在Windows的应用程序开发中,我们习惯了变量(对象)声明和使用方式,就是有全局和局部之分,定义好了全局变量(对象)以后在其他窗体中就可以使用,但是窗体之间的变量(对象)无法共享,如果需要可以通过参数传递的方式进行。

  在JavaScript编程中,很在意全局变量的定义使用,尽量避免全局变量的定义和使用,以防止出现可能的“变量污染”,比如其他应用随意修改全局变量。

  在vue中,如果只是一般的小程序或者个人独立开发的程序,全局变量(对象)不多,也可以直接在main.js或者App.vue中定义,然后在其他组件中直接使用定义好的变量(对象:参数和方法)。

  一、如果按照以往的想法,在其他组件中怎样使用main.js中或者其他组件中定义好的参数和方法?
  1、全局的变量、方法和属性需要挂载到vue的原型才能为其他组件使用。全局的变量、方法和属性需要一个显式定义,以便能够在全局范围内使用。

  例如,声明全局的变量或者方法:

Vue.prototype.$GlobalMethods = {
  MyChangeName: function (newName) {
    this.MyObj.name = newName;
  }
};

Vue.prototype.$GlobalVar='2222';

  这样就可以在其他组件使用定义好的变量或者方法:

//使用方法
this.$GlobalMethods.MyChangeName.call(this.$root, 'Jane123');
//使用变量
this.$GlobalVar='dddd';

  上面的方法是JavaScript本身具有的方法,虽然可以使用,但是vue是响应式的,这里变量的改变却不是响应式的,对于稍微大一些的程序或者团队开发的程序,这样的做法不可行。

  2、在main.js或者App.vue中定义的组件、变量、方法、属性都是局部的,除非通过如 props、$emit、Vuex 状态管理等向下与向上传递或者通过this.root来访问,否则并不能为其他组件使用。
  在main.js文件中,在创建一个根 Vue 实例后启动整个 Vue 应用。在这个文件中定义的变量、函数或 Vue 实例的其他配置仅属于该 Vue 实例。虽然这个根实例挂载的组件和子组件可以通过 this.$root访问到根实例的属性和方法,但这些属性和方法并不自动变为全局可用。
  在main.js中定义如下:

new Vue({
  data:{
    MyObj:{
      name:'John1',
      age:3
    }    
  },
  methods:{
      changeName(name){
        this.MyObj.name=name;
      }
  },
  router,
  store,
  render: h => h(App)
}).$mount('#app')

  在其他组件中使用:

this.$root.MyObj.name='修改后的名字';
this.$root.MyObj.age='222222';  
this.$root.changeName('PSP');

  3、全局组件,需要通过Vue.component('global-component01', {  // 组件配置 })来进行。

  4、在 Vue中的组件数据是隔离的,一个组件内部定义的data是无法被另一个组件直接访问和修改的。
  在前面的学习中,知道通过下面的几种方式来访问组件数据:
  ⑴. 事件总线(Event Bus)
  适用于小型应用,创建一个事件总线并在两个组件间通过它通信。在 Vue 2 中,你可以使用一个空的 Vue 实例作为中央事件总线。
  ⑵ 父子组件通信
  通过props把数据传给子组件,通过自定义事件或sync修饰符让子组件通知父组件进行相应的更新。
  ⑶ 通过$refs引用
  添加ref属性,在方法中直接调用子组件实例的方法或修改它的数据。
  上面的方式方法,前面写过文章《Vue组件化编程的组件通信》、《三种简洁易行的方法解决基于Vue.js的组件通信》。

  对于大型应用或者基于团队的开发,推荐使用 Vuex,Vuex提供更清晰和可维护的状态管理。

  二、使用vuex

  在使用vue create 项目名称创建项目时选择了VueX,就可以使用它来进行变量的共享操作。VueX 是一个用于 Vue.js 应用程序的状态管理模式和库,它可以集中管理应用程序的各种状态,包括变量、函数(方法)、组件等。

  修改store目录下的index.js:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    age:0
  },
  mutations: {
    AddAge (state, num) {
      state.age += num;
    },
    ReduceAge (state, num) {
      state.age -= num;
    }
  },
  actions: {
    AddAge ({ commit }, num) {
      commit('AddAge', num);
    },
    ReduceAge ({ commit }, num) {
      commit('ReduceAge', num);
    }
  },
  getters: {
    age: state => state.age
  }
});

  修改HomeView.vue内容:

<template>
    <div>
        <h1>年龄:{{ age }}</h1>
        <input type="number" v-model="num" />
        <button @click="increment">增加年龄</button>  
        <button @click="decrement">减少年龄</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      num: 1
    };
  },
  computed: {
    age () {
      return this.$store.getters.age;
    }
  },
  methods: {
    increment () {
      this.$store.dispatch('AddAge', this.num);
    },
    decrement () {
      this.$store.dispatch('ReduceAge', this.num);
    }
  }
};
</script>

  结果显示:

vue中的vuex-LMLPHP

  使用VueX进行组件之间的变量、方法函数的共享操作,看起来还是挺繁琐的。具体的使用也是因人因项目而宜,不是硬性要求。
  1、使用state对象来定义状态。
  2、mutations对象包含用于修改状态的方法。
  3、actions对象包含用于触发mutations的方法。
  4、getters对象包含用于获取状态的方法。
  5、组件使用时通过触发mutations定义好的方法来完成操作。
vue中的vuex-LMLPHP

  下面是对多个变量的定义与使用。
  定义:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state:{
        id:123,
        name:'John',
        age:1 
  },  
  mutations: {//修改
    ChangeAge (state, num) {
      state.age = num;
    },
  },
  actions: {
  },
  getters: {
    
  }
});

  使用:

<template>
    <div>
        <h1>ID:{{id }}</h1>
        <h1>姓名:{{ $store.state.name }}</h1>
        <h1>年龄:{{ age }}</h1>
        <input type="number" v-model="age">
  </div>
</template>

<script>
export default {
  computed: {
    id(){
      return this.$store.state.id;
    },
    age: {
      get(){
        return this.$store.state.age;
      },
      set(value){
        this.$store.commit('ChangeAge',value)
      }      
    }
  }
};
</script>

vue中的vuex-LMLPHP


  对于多个变量也可以封装在一个对象中。

export default new Vuex.Store({
  state(){
    return {
      MyObj:{
        name:'John',
        age:1
      }
    }    
  },
  mutations: {
    AddAge (state, num) {
      state.MyObj.age += num;
    },
    ReduceAge (state, num) {
      state.MyObj.age -= num;
    }
  },
  actions: {
    AddAge ({ commit }, num) {
      commit('AddAge', num);
    },
    ReduceAge ({ commit }, num) {
      commit('ReduceAge', num);
    }
  },
  getters: {
    age: state => state.MyObj.age
  }
});

  三、使用mapState辅助函数

  mapState辅助函数是Vue.js提供的用于将store中的状态映射到组件的计算属性computed中。它简化了在组件中访问store中的状态的过程。
  通过mapState辅助函数可以将store中的状态定义为组件的计算属性,而不需要显式地访问store.state。
  当参数是数组时,每个元素可以是一个字符串或是一个函数。如果是字符串,它会作为映射后的计算属性名;如果是函数,函数中可以访问state,并返回一个计算属性值。
  当参数是对象时,可以使用键-值形式,其中键是计算属性名,值是一个函数。这个函数接受state作为第一个参数,可以直接访问state并返回一个计算属性值。
  比如上面的显示可以改写为:

<template>
    <div>
        <h1>ID:{{id }}</h1>
        <h1>姓名:{{ $store.state.name }}</h1>
        <h1>年龄:{{ age }}</h1>
        <input type="number" @input="ChangeAge" :value="age">
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
    computed: mapState(['id','name','age']),
    methods:{
        ChangeAge(e){
            this.$store.commit('ChangeAge',e.target.value)
        }
    }
};
</script>

  上面是采用数组的方式,下面是采用对象的方式:

<template>
    <div>
        <h1>ID:{{ MyID }}</h1>
        <h1>姓名:{{ name }}</h1>
        <h1>年龄:{{ ChangeAge }}</h1>
        <input type="number" v-model="num">
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
    data(){
      return { num:1 }
    },
    computed:mapState({
      MyID:state=>state.id,
      name:'name',
      ChangeAge(state){
        return state.age+this.num
      }
    })
};
</script>

  得到的效果也是一样的。
  在计算属性的书写中,如果还有其他的计算方法或者属性,那么就需要使用对象展开符。

    computed:{
        count(){ return 1 },
        ...mapState({
        MyID:state=>state.id,
        name:'name',
        ChangeAge(state){
          return state.age+this.num
        }
      })
    }
01-30 09:00