做宣传图片的网站,网站主题模板制作,下载官方app下载安装,wordpress网站如何引流在Windows的应用程序开发中#xff0c;我们习惯了变量#xff08;对象#xff09;声明和使用方式#xff0c;就是有全局和局部之分#xff0c;定义好了全局变量#xff08;对象#xff09;以后在其他窗体中就可以使用#xff0c;但是窗体之间的变量#xff08;对象我们习惯了变量对象声明和使用方式就是有全局和局部之分定义好了全局变量对象以后在其他窗体中就可以使用但是窗体之间的变量对象无法共享如果需要可以通过参数传递的方式进行。 在JavaScript编程中很在意全局变量的定义使用尽量避免全局变量的定义和使用以防止出现可能的“变量污染”比如其他应用随意修改全局变量。 在vue中如果只是一般的小程序或者个人独立开发的程序全局变量对象不多也可以直接在main.js或者App.vue中定义然后在其他组件中直接使用定义好的变量对象参数和方法。 一、如果按照以往的想法在其他组件中怎样使用main.js中或者其他组件中定义好的参数和方法 1、全局的变量、方法和属性需要挂载到vue的原型才能为其他组件使用。全局的变量、方法和属性需要一个显式定义以便能够在全局范围内使用。 例如声明全局的变量或者方法
Vue.prototype.$GlobalMethods {MyChangeName: function (newName) {this.MyObj.name newName;}
};Vue.prototype.$GlobalVar2222;这样就可以在其他组件使用定义好的变量或者方法
//使用方法
this.$GlobalMethods.MyChangeName.call(this.$root, Jane123);
//使用变量
this.$GlobalVardddd; 上面的方法是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.namename;}},router,store,render: h h(App)
}).$mount(#app) 在其他组件中使用
this.$root.MyObj.name修改后的名字;
this.$root.MyObj.age222222;
this.$root.changeName(PSP); 3、全局组件需要通过Vue.component(global-component01, { // 组件配置 })来进行。 4、在 Vue中的组件数据是隔离的一个组件内部定义的data是无法被另一个组件直接访问和修改的。 在前面的学习中知道通过下面的几种方式来访问组件数据 ⑴. 事件总线Event Bus 适用于小型应用创建一个事件总线并在两个组件间通过它通信。在 Vue 2 中你可以使用一个空的 Vue 实例作为中央事件总线。 ⑵ 父子组件通信 通过props把数据传给子组件通过自定义事件或sync修饰符让子组件通知父组件进行相应的更新。 ⑶ 通过$refs引用 添加ref属性在方法中直接调用子组件实例的方法或修改它的数据。 上面的方式方法前面写过文章《Vue组件化编程的组件通信》、《三种简洁易行的方法解决基于Vue.js的组件通信》。 对于大型应用或者基于团队的开发推荐使用 VuexVuex提供更清晰和可维护的状态管理。 二、使用vuex 在使用vue create 项目名称创建项目时选择了VueX就可以使用它来进行变量的共享操作。VueX 是一个用于 Vue.js 应用程序的状态管理模式和库它可以集中管理应用程序的各种状态包括变量、函数方法、组件等。 修改store目录下的index.js
import Vue from vue
import Vuex from vuexVue.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内容
templatedivh1年龄{{ age }}/h1input typenumber v-modelnum /button clickincrement增加年龄/button button clickdecrement减少年龄/button/div
/templatescript
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 vuexVue.use(Vuex)export default new Vuex.Store({state:{id:123,name:John,age:1 }, mutations: {//修改ChangeAge (state, num) {state.age num;},},actions: {},getters: {}
}); 使用
templatedivh1ID{{id }}/h1h1姓名{{ $store.state.name }}/h1h1年龄{{ age }}/h1input typenumber v-modelage/div
/templatescript
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并返回一个计算属性值。 比如上面的显示可以改写为
templatedivh1ID{{id }}/h1h1姓名{{ $store.state.name }}/h1h1年龄{{ age }}/h1input typenumber inputChangeAge :valueage/div
/templatescript
import { mapState } from vuex;export default {computed: mapState([id,name,age]),methods:{ChangeAge(e){this.$store.commit(ChangeAge,e.target.value)}}
};
/script 上面是采用数组的方式下面是采用对象的方式
templatedivh1ID{{ MyID }}/h1h1姓名{{ name }}/h1h1年龄{{ ChangeAge }}/h1input typenumber v-modelnum/div
/templatescript
import { mapState } from vuex;export default {data(){return { num:1 }},computed:mapState({MyID:statestate.id,name:name,ChangeAge(state){return state.agethis.num}})
};
/script 得到的效果也是一样的。 在计算属性的书写中如果还有其他的计算方法或者属性那么就需要使用对象展开符。 computed:{count(){ return 1 },...mapState({MyID:statestate.id,name:name,ChangeAge(state){return state.agethis.num}})}
