Question

我正在使用带vue-router和webpack的vuejs 2.0。

我需要使用session-store.js在src / stores文件夹中列出组件中的项目，但是我无法从App.vue中的商店和组件内部读取数据。

会话store.js

import $ from 'jquery'

var SessionStore = {
  state: {
    data: []
  },
  fetchSessionScheduleData: function () {
    $.ajax({
      url: 'https://www.myapi.com/items',
      success: function (response) {
        if (response.data) {
          SessionStore.state.data = response.data
        }
      }
    })
  }
}

App.vue

<script>
import SessionStore from './stores/session-store.js'

export default {
  name: 'app',
  components: {
    Test
  },
  data () {
    return {
      SessionStore: SessionStore.state
    }
  },
  created: function () {
    this.fetchData()
  },
  methods: {
    fetchData: function () {
      SessionStore.fetchSessionScheduleData()
    }
  }
}
</script>

main.js

import './assets/css/materialize.css'
import './assets/css/oclock-styles.css'
import './assets/css/styles.css'

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'

import Hello from './components/Hello.vue'
import Schedule from './components/Schedule.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Schedule },
  { path: '/foo', component: Hello },
  { path: '/schedule', component: Schedule }
]

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

/* eslint-disable no-new */
new Vue({
  router,
  el: '#app',
  template: '<App/>',
  components: { App }
})

Schedule.Vue

<template>
  <div v-once>
        <h4>{{ formatDate(index) }}</h4>
        <ul class="collapsible" data-collapsible="expandable">
          <session-schedule v-for="log in item" v-bind:item="log"></session-schedule>
        </ul>
      </div>
</template>


<script>
export default {

  name: 'Schedule',
  data () {
    return 'Hello'
  },
  methods: {
    formatDate (date) {
      var moment = require('moment')
      var now = moment(new Date())
      var sessionDate = moment(date, 'DD-MM-YYYY', true).format()
      var diff = now.diff(sessionDate, 'd')
      if (diff === 0) {
        return 'Today'
      } else if (diff === 1) {
        return 'Yesterday'
      } else {
        return date
      }
    }
  }
}
</script>

我应该如何修改它以便能够获取数据？以及如何从计划组件中调用会话计划组件？

Answer 1

我认为你应该使用 vue-resource 。（两个原因：没有jQuery，专为vue而设计）。在我的应用程序中，我也使用了你不需要的 vuex ，但是vue-resource看起来像这样。

app.js所需的bootstrap.js中的

（替代main.js）我有：

empty() -> realize()

指出：要求vue-resource将window.Vue = require('vue') require('vue-resource')添加到http（js是如此随机）

Vue

然后在api / devices.js中有：

Vue.http.options.root = '//localhost:8000/api/v1'

*密切关注网址斜杠，因为只有当您不在相对网站之前写入斜杠而且不在root之后写入斜杠时，vue-resource才会使用root。

最后在app.js（main.js）中会有类似的东西：

export function getDevices() {
  Vue.http.get('devices').then(response => {
    console.log(response)
  }, response => {
    console.log(response.status)
  })
}

在子组件中，您可以访问api。$ api

也许我写错了。这只是它如何工作的一个例子。我不是一个vue pro ...但是：D祝你好运。顺便说一下，如果您决定使用vue-resource，请查看他们的示例，因为我只向您展示了console.logs

VueJs2使用包含组件的商店

1 个答案: