vue怎么同时调用两台不同服务器的接口

vue组件的数据传递应该是单向，永远是向下的，把父组件属性方法传递到子组件。

如果子组件要改变不同的颜色，是应该接受父组件传递进来的props，自己调用自己的方法，把props当个参数来判断来显示什么颜色，而不是让父元素调子组件的方法。

还有一种是vuex，组件本身跟store的某个值绑定，外部组件修改store的值，来影响该组件的颜色。

在VueRouter中调用接口的步骤如下：

1. 在VueRouter的路由配置中，添加一个beforeEnter钩子函数，用于在进入路由之前调用接口；

2. 在beforeEnter钩子函数中，使用axios或者fetch等发起请求，调用接口；

3. 在接口返回数据后，将数据存储到Vuex中，以便在组件中使用；

4. 在组件中，使用Vuex中的数据，完成渲染等操作。

总之，在VueRouter中调用接口的步骤是：在路由配置中添加beforeEnter钩子函数，使用axios或fetch等发起请求，将数据存储到Vuex中，在组件中使用Vuex中的数据完成渲染等操作。

vue＋vuex＋axios从webpack－server获取模拟数据存入vuex并取回展示到页面

时间：2017-03-23 20:09:04

                        阅读：426

                        评论：0

                        收藏：0

                        [点我收藏+]

             

标签：errno   文件中   div   第一个   渲染   getter   fun   pes   vue

在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话，有必要考虑引入vuex来管理这些凌乱的状态，今天这边博文用来记录这一整个的过程，后台api接口是使用webpack－server模拟的接口，这个前面的文章中有提到，需要的可以去翻阅。

整个的流程是在组件的created中提交dispatch，然后通过action调用一个封装好的axios然后再触发mutation来提交状态改变state中的数据，然后在组件的计算属性中获取state的数据并渲染在页面上

首先新需要在项目中安装vuex：

运行命令　npm　install　vuex　－－save－dev

在项目的入口js文件main．js中

import store from ‘./store/index‘

并将store挂载到vue上

new Vue({

el: ‘#app‘,

router,

store,

template: ‘<App/>‘,

render: (createElement) =>createElement(App)

})

然后看下整个store的目录结构，modules文件夹用来将不同功能也面的状态分成模块，index．js文件夹是store的入口文件，types文件夹是定义常量mutation的文件夹

整个vuex的目录结构如下：

这里我新建了文件夹fetch用来编写所有的axios处理和axios封装

---