在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>结果显示：
使用VueX进行组件之间的变量、方法函数的共享操作，看起来还是挺繁琐的。具体的使用也是因人因项目而宜，不是硬性要求。
1、使用state对象来定义状态。
2、mutations对象包含用于修改状态的方法。
3、actions对象包含用于触发mutations的方法。
4、getters对象包含用于获取状态的方法。
5、组件使用时通过触发mutations定义好的方法来完成操作。
下面是对多个变量的定义与使用。
定义：
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>
对于多个变量也可以封装在一个对象中。
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
}
})
}
