首页 文章

VueJs2使用包含组件的商店

提问于
浏览 次
0

我正在使用vuejs 2.0与vue-router和webpack .

我需要使用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>

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

webpack vue.js vue-component vuejs2

1 回答

  • 0

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

    在app.js所需的bootstrap.js中（main.js的替代方法）我有：

    window.Vue = require('vue')
require('vue-resource')

    point：vue-resource的需求将 http 添加到 Vue （js是如此随机）

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

    然后在api / devices.js中有：

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

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

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

    require('./bootstrap')

import http from 'vue'
import * as api from 'api/devices'

Vue.config.devtools = true
Vue.config.silent = false

new Vue({
  api,
  http,
  el: '#app',
  created() {
    console.log(this.api.getDevices())
  }
})

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

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

    回复于

相关问题