Vuejs2 Vue.js 2-在视图之间共享XHR数据而不使用Vuex？

我在自学Vue.js2。我的任务是从黑客新闻API中提取帖子列表。单击列表帖子后，新视图将显示该特定帖子中的一些数据

我很难理解如何在从第一个视图路由到第二个视图时在第二个视图中填充REST API数据。

（我使用的是vue路由器和vue资源（？），而不是Vuex（它是一个如此小的应用程序）。）

下面是Item.vue和List.vue。在List.vue中，我试图通过单击列表项来路由到Item.vue。例如，单击一个名为“Guy与Vue相处艰难”的列表项，然后打开第二个视图以显示“Guy与Vue相处艰难”一文的标题、分数、URL和评论

List.vue（创建列表、XHR请求）

列表Vue


{{index+1}}。{{item.title}
点：{{item.Points}


导出默认值{
名称：'列表'，
道具：[]
数据（）{
返回{
项目：[]
}
},
挂载：函数（）{
控制台日志（“已创建”）；
这是fetchList（）；
},
方法：{
fetchList（）{
这是。$http.get（'http://hn.algolia.com/api/v1/search?query=javascript&hitsPerPage=25）。然后（（回应）=>{
this.items=response.data.hits；
})
}
}
}

Item.vue（从List.vue接收特定于项目的数据）

项目Vue




导出默认值{
名称：'项目'，
数据（）{
返回{
项目：{}
}
},
挂载：函数（）{
控制台日志（“已创建”）；
},
方法：{
}
}

---

提前谢谢

问题在于第一个视图不是第二个视图的直接后代，因此无法通过道具向其传递数据。实际上，我不会为此使用

vuex

，而是通过特定列表项的路径传递

id

，并通过id获取单个项，例如：

const View1 = {
  template: `<div>
    <ul>
      <li v-for="item in list"><router-link :to="'view2/'+item.id">{{item.name}}</router-link></li>
    </ul>
  </div>`,
  data() {
    return {
      list: [{
        id: 1,
        name: 'foo'
      }, {
        id: 2,
        name: 'bar'
      }, {
        id: 3,
        name: 'baz'
      }]
    }
  }
}

const View2 = {
  template: `<div>Fetch item {{id}} <br /><router-link to="/">back</router-link></div>`,
  created(){
     console.log('Fetch data for item '+ this.id);
  },
  computed:{
    id(){
      return this.$route.params.id
    }
  }
}

const routes = [{
  path: '/',
  component: View1
}, {
  path: '/view2/:id',
  component: View2
}]

const router = new VueRouter({
  routes // short for `routes: routes`
})

var app = new Vue({
  router
}).$mount('#app')

然后在app.js中（或在主Vue实例所在的任何地方），您可以执行以下操作：

import Vue from 'vue'
import store from './store'

import App from './components/App.vue'

new Vue({
  store, // this will be available in components via this.$store
  render: h => h(App)
}).$mount('#app')

您还必须进行一些更改，例如在推送到路由之前提交状态，添加一个从存储中获取状态的计算id，以及从不再需要的路由中删除id

---

我已经更新了JSFIDLE，向您展示了它是如何工作的：

问题是第一个视图不是第二个视图的直接后代，因此您不能通过道具将数据传递给它。实际上，我不会为此使用

vuex

，而是通过特定列表项的路径传递

id

，并通过id获取单个项，例如：

const View1 = {
  template: `<div>
    <ul>
      <li v-for="item in list"><router-link :to="'view2/'+item.id">{{item.name}}</router-link></li>
    </ul>
  </div>`,
  data() {
    return {
      list: [{
        id: 1,
        name: 'foo'
      }, {
        id: 2,
        name: 'bar'
      }, {
        id: 3,
        name: 'baz'
      }]
    }
  }
}

const View2 = {
  template: `<div>Fetch item {{id}} <br /><router-link to="/">back</router-link></div>`,
  created(){
     console.log('Fetch data for item '+ this.id);
  },
  computed:{
    id(){
      return this.$route.params.id
    }
  }
}

const routes = [{
  path: '/',
  component: View1
}, {
  path: '/view2/:id',
  component: View2
}]

const router = new VueRouter({
  routes // short for `routes: routes`
})

var app = new Vue({
  router
}).$mount('#app')

然后在app.js中（或在主Vue实例所在的任何地方），您可以执行以下操作：

import Vue from 'vue'
import store from './store'

import App from './components/App.vue'

new Vue({
  store, // this will be available in components via this.$store
  render: h => h(App)
}).$mount('#app')

您还必须进行一些更改，例如在推送到路由之前提交状态，添加一个从存储中获取状态的计算id，以及从不再需要的路由中删除id

---

我已经更新了JSFIDLE，向您展示了它的工作原理：

Craig，谢谢。我的问题是，当我路由到“View2”时，我只传递那个“id”值。我需要整个项目的数据：（{id:blah，points:893，url:newyorktimes.com/article/blah}）。如何将整个数据命中（对象）放入“视图2”？这有意义吗？我需要用“view1”中项目的数据填充view2中的字段。如果无法通过id检索单个记录，则需要提取状态，这意味着您应该使用vuex。我更新了我的答案，告诉你怎么做（别担心，这很简单）克雷格，谢谢。你帮了很多忙。为什么要删除锚标记的路由器链接？这是因为我在单击时调用了一个方法。您无法在

路由器链接

上注册

单击

事件，因此我们无法调用在存储中设置项目的方法。为了让它正常工作，你需要设置项目，然后调用

路由器。按程序推送
，所以我使用了锚。啊，我明白了。克雷格，你帮了大忙。谢谢，克雷格，谢谢。我的问题是，当我路由到“View2”时，我只传递那个“id”值。我需要整个项目的数据：（{id:blah，points:893，url:newyorktimes.com/article/blah}）。如何将整个数据命中（对象）放入“视图2”？这有意义吗？我需要用“view1”中项目的数据填充view2中的字段。如果无法通过id检索单个记录，则需要提取状态，这意味着您应该使用vuex。我更新了我的答案，告诉你怎么做（别担心，这很简单）克雷格，谢谢。你帮了很多忙。为什么要删除锚标记的路由器链接？这是因为我在单击时调用了一个方法。您无法在
路由器链接
上注册
单击
事件，因此我们无法调用在存储中设置项目的方法。为了让它正常工作，你需要设置项目，然后调用
路由器。按程序推送
，所以我使用了锚。啊，我明白了。克雷格，你帮了大忙。非常感谢。
import Vue from 'vue'
import store from './store'

import App from './components/App.vue'

new Vue({
  store, // this will be available in components via this.$store
  render: h => h(App)
}).$mount('#app')